Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

186 CHAPTER 4 Getting started with CSS3


FIGURE 4-17 he use of absolute positioning to create columnsT

Using the float property


Absolute positioning can be a bit brittle when using absolute settings. In the previous
example, it would be better if the <div> elements were not removed from the HTML docu-
ment flow but, rather, could be sized and placed side by side to produce columns. If the
<div> elements are not removed from the HTML document flow, div6 will automatically stay
at the bottom.
The float property can be set to allow an element to float to the left or right. An element
can be floated only horizontally, not vertically, and will float as far to the left or right as it can.
Elements after the floating element flow around the floating element. Elements before the
floating element are not affected.
To understand how the float property works, the same HTML document is used as in pre-
vious examples, and the following is the content of the default.css file.
p {
margin: 0px;
}

div {
border: solid;
border-color: black;
}

#div1 {
background-color: yellow;
Free download pdf