How to create a CSS layout using floats
Creating a layout without the use of tables isn't as difficult as you may think. Using CSS-floats you can easily create very advanced multi-column layouts that allow for mobile phone access and that do not confuse screen readers.
“Creating a layout without the use of tables isn't as difficult as you may think.”
In this article you will create the oh-so-common two-column blog layout with header, navigation, content, sub-content and footer fields.
Let's jump right into the HTML code, which looks as follows (I've intentionally left out the head-element so as not to clutter the code too much):
Obviously the divs would be filled with more code were this a real web site. I've left them empty for the same reason I skipped the head-element. The wrapper-div is used to wrap around the entire page. This is where we set the width and positioning of the entire site
On to the CSS:
#wrapper { background: red; margin: 20px auto; padding: 20px; width: 700px; }
#header { background: green; height: 100px; margin: 0 0 20px 0; }
#navigation { background: blue; height: 40px; margin: 0 0 20px 0; }
#content { background: yellow; width: 500px; float: left; margin: 0 0 20px 0; }
#sub-content { background: navy; width: 200px; float: right; margin: 0 0 20px 0; }
#footer { background: red; clear: both; height: 40px; }
Most of the code should be familiar to you, just some backgrounds and margins. The interesting bits are #content, #sub-content and #footer. As you can see #content's width is 500px and it is floated to the left, #sub-content has a width of 200px and is floated to the right. As #wrapper's width is 700px, #content and #sub-content will fit exactly. When you float something to the left (or the right) it will "float" to the left (or right) of every element beneath it. This way you can create columned layouts using CSS. But whenever you float elements, the parent-element will no longer wrap around the floated one. What you need to do is clear the floats using clear: both (or left/right). As you can see, this has been done in the #footer. Try it without the clear if you want to understand more about how floats work.
There are ways to self-clear floats if there is no available element to do the clearing; please read [My top 7 tips for better HTML]()-article if you are interested in how that is done.
That method could not be used here though because then the footer would float on top of #content and #sub-content (like it does without the clear).
