Floating Content
There are three float option:* float:left;
* float:right;
* float:none;
CSS gives us the ability to float anything. Divs, paragraphs, images, lists, any HTML tag. The way to use it is always the same, but sometimes we use floats for pieces of content and other times for blocks in order to create a layout.
Examples
#cont_wrap {
margin:0 auto;
width:900px;
}
#left_cont {
float:left;
width:300px
}
#right_cont {
float:right;
width:600px;
}
The left_cont if being floated to the left and right_cont to the right.
I also defined a width for each div to fit inside the cont_wrap.
Float none is used to override previous floats. If nothing is floating, the float none property won’t do anything.
Clearing Floats
The sister property of floats is clear. The clear property has three possibilities as well:* clear:left;
* clear:right;
* clear:both;
This basicly tells the item to stop floating. It must be applied to the first element that will not float located after an element currently floating.
Examples
#footer {
clear:both;
margin:0 auto;
width:900px;
}
Now the footer is clearing the #left_cont and #right_cont elements.
This helps the container element (#cont_wrap), to succesfuly wrap around it’s children once again.
Float none is used to override previous floats. If nothing is floating, the float none property won’t do anything.
TO BE CONTINUED......
