Subcide

6. Floats

Floats can be a tricky concept to get your head around. Basically a float is an element that is aligned against the left or right side of its container. (for more detail, read maxdesigns in depth introduction to floats.

In the case of this website, we are going to float our sidebar-a div to the right, with a width of 280px. Add the following to your CSS:

#sidebar-a {
	float: right;
	width: 280px;
	background: darkgreen;
}

You have now successfully floated your first div, and you should now have a page that looks like this:

Just for testing purposes, replace the text in the content div to this:

<div id="content">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
	Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

Notice that the text in the content div wraps around the floated sidebar div, as shown below:

This isn't what we want. We want the content div to sit along side the sidebar div, with its right edge against the left edge of the sidebar.

An easy way to achieve this in a float layout like this, is to put a right margin on our content div that is the same width as our sidebar, in this case 280px. This will push the right edge of the content away from the right edge of the page-container.

#content {
	margin-right: 280px;
	background: green;
}

Great, we've almost got the float layout sussed. But there's one more thing we need to consider... what happens if the sidebar div is taller than the content div?

Lets see. Copy and paste this text into the sidebar div:

<div id="sidebar-a">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
	Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

Thats not what we want at all. The reason the footer hasn't moved down is because the sidebar is 'floated' right.

Explanation: By default, any floated element will not push down elements that are below it. This is because floated elements are not considered part of the document 'flow'. Its like they are on another layer 'floating' above the other elements, and becuase of this, it can't effect their positions.

What can we do to fix this problem? Introducing the "clear" css property.

Add this to your stylesheet:

#footer {
	clear: both;
	background: orange;
	height: 66px;
}

When an element has the clear property assigned, if it comes into contact with a float it is placed right below where that float ends. You can specify if it is effected by only left floats or only right floats, in this case we could use either 'right' or 'both'. We'll use clear: both just to be safe.