Austin Web Design Blog

Simple Layout Using Floats

To start, create a div with an id of container. We will nest the other divs inside this one. You can set a width on this if you like, or if you don’t the nested divs will stretch across the page. In our example we will set a width on the container div as well as on both the left and right column divs. I’ve added a little padding to the main blocks and applied backgrounds and font color and family styles. Note: If you apply padding to these main layout containers you will need to adjust the width of your container tag accordingly.

Without any floats applied your blocks will look like this:

div blocks before floats applied

The columns will sit one on top of the other - not ideal for a layout. In order to get these columns to sit side by side, we will apply float:left to their styles. This is the result:

div blocks after floats applied

As you can see from this example, our left and right columns are positioned where we want, however we have a problem with the position of the footer. It is sitting under the right column div. We can fix this easily with a clear:left statement on the footer. A clear statement will return the flow of the document below the floated elements. If your columns had the style float:right, you would need clear:right on your footer. If your columns each had a different float such as float:left on the left column and float:right on the right column you would need the style clear:both, meaning "clear both left and right floats" on the footer. See the result below.

div blocks after footer clear applied

Failure to clear floats results in all sorts of positioning problems in our layouts. If you need to clear floats but don’t want to add the clear:float style directly to the footer, a common solution is to add a breaking space below the floated elements with the clear:left style applied. This also works to ensure that everything below those two columns in your document will fall below them in the browser window.

You may view the full html solution here.

Thu, 10 Mar 2011 08:50

Tags , , , , , , , , , ,

Comment Simple Layout Using Floats