CSS Positioning Pt. 1 - Floating

CSS positioning can seem to be complicated but its quite easy. By default in our HTML pages, elements have a 100% width and they place themselves one on top of each other.Floats exist in order to change this. Their main focus is to show elements parallel to each other. When you float something, its regular width reduces just to fit it’s content (unless specified), and stops having the full width of the browser.

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......