Understanding Floats in CSS – Making a 3-column layout
Sharing knowledge is cool and if your audience is willing to learn – its Uber cool! 
With that note, here is my little contribution towards the code monkeys.
This article is meant for the people who are beginners or are in the mid-way of learning CSS (Cascading Style Sheets). When I started learning CSS, the most difficult problem that I faced was using floats and how to align and position the divisions (DIVs) in a page.
In a pure CSS based design, the formula for coding your layout lies in the fact, as to how best you can position your DIV tags. In this article, I will try and give you a better understanding of using the float property of CSS to position your elements.
Let us assume that we want to create a 3-column layout for our new WordPress theme. I am taking up this example because many people do not understand how to do this and have asked me questions in the past about this technique. In this tutorial, I am assuming that you know the basics of HTML.
Step 1
Make a blank HTML file called page.html and a blank CSS file called style.css and put them in the same place or folder together.
Now, open the HTML file in any text editor and paste this code in it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My CSS Layout</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
All right. Let me explain this code to you. This is the basic framework from where we are going to build the 3-column layout. The first line declares the DOCTYPE which is important when you build standards compliant code. The fourth line in this code makes a call for your stylesheet file (style.css) that you should have placed in the same location as your page.html file. In the body part, I have declared a DIV and given it an identifier (ID) called wrapper. We will use this ID in our style.css and assign it different properties. Rest is basic HTML.
Step 2
Open your style.css file and put this code in it.
* {margin:0; padding:0;}
body {margin:auto; background-color:#C3D9FF; font:12px Verdana; color:#000;}
#wrapper {margin:20px auto; width:950px;}
The width:950px; will limit your total page area (in the wrapper DIV) to 950 pixels and margin:20px auto; will center your content giving it a margin of 20 pixels from the top of your browser. We will use this as the wrapper for your whole layout as we plan to make a fixed-width layout of 950 pixels.
Now open your page.html file in the editor and paste this content in between the starting and ending of wrapper DIV tags.
<div id="header">
</div>
<div id="sidebar1">
</div>
<div id="content">
</div>
<div id="sidebar2">
</div>
<div id="footer">
</div>
The IDs of the above DIVs are pretty self-explanatory and you can see what I am planning to do in the layout. There will be a header on the top (#header), a sidebar on the left (#sidebar1), content area in the middle (#content), a sidebar on the right (#sidebar2) and finally a footer (#footer) on the bottom. We will now try and style these DIVs in our style.css file which will position everything in the right place.
Step 3
Open your style.css file and start adding the following lines of code, one line at a time, after reading explanation for each one of them.
#header {width:930px; padding:10px; height:100px; background-color:#6192DF; font:30px Arial;}
This will define the header with 930 pixels width, give it a padding of 10 pixels on each side (top, right, bottom, left). If you take a total, the total width of this DIV will be 930+10(left)+10(right)=950px which is also equal to the width of the wrapper DIV. Height property fixes the height of the header to 100 pixels, background-color:#6192DF; gives it light blue background color and font:30px Arial; specifies the font size and family.
#sidebar1 {width:180px; padding:10px; float:left; background-color:#8BABDF;}
This does all the things similar except adding a float:left; property which will position this #sidebar1 DIV to the extreme left inside of wrapper DIV. Also note, the total width of sidebar including padding on both sides is 200px.
#content {width:530px; padding:10px; float:left; background-color:#FFFFFF;}
This positions the content left of the #sidebar1 DIV inside the wrapper DIV. Its total width is 550px including padding on both sides.
#sidebar2 {width:180px; padding:10px; float:left; background-color:#8BABDF;}
This will place the #sidebar2 to the left of the content making it 200px wide including the padding on both sides. So if you observe carefully, #sidebar1, #content and #sidebar2 are placed adjacent to each other now.
#footer {width:930px; padding:10px; height:30px; background-color:#6192DF; clear:both;}
Finally, we define the #footer with a total width of 950px including the padding on both sides.
You will see that there is a special property that has been added to the footer DIV called clear:both;. This is where most people get confused. When you are floating more than one divisions by placing them adjacently, you need to clear all the floats before styling the further content. In this case both the sidebars and the content are floating together. So, in order to clear the floats, we assign this property in the footer DIV which anyway comes at the bottom and clears the above floats.
Now, all our code is ready and its time to execute. But before we do that, Just place some dummy content in your header, sidebar1, content, sidebar2 and the footer DIVs by editing the page.html. You can use this block as the dummy content :-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pretium tincidunt tellus. Donec bibendum. Sed gravida eros eget odio. Vivamus nec ante nec dui suscipit faucibus. Nunc mollis imperdiet metus. Donec aliquet interdum quam. Ut tempus arcu a urna. Nullam adipiscing mi id ligula. Nam sollicitudin placerat metus. Morbi tempus consequat dui.
After you have done so, double-click your page.html to execute it. If you have done everything correctly, you should see something like this in your browser window and it should work exactly the same, both in Internet Explorer and Firefox.
Here are the final files if you want to download them :- CSS 3-Column Layout
So, there we have the wonderful 3-column layout all ready for you. I hope you liked this little tutorial of mine and I am sure it will clear many doubts for those struggling with CSS and layouts. Please do not forget to write some comments because those are what make my day
I wish to change the CSS outlook on my website which is doing quite good in SERP.
Will the change affect the rankings? Because it might affect spider reading pattern…I don’t know.
@stan: You place the code in the mypage.html file between the starting and ending DIV tags.
for example, between
Where and how do you place the dummy code?
Thanks for the tutorial!
Terrific tutorial. Keep practicing on us, your fans, who can always be counted on to ask brilliant (and sometimes newbie) questions so you can refine your tutorials further. After you’ve tested out your tutorials on us, I predict you have a “how to” book in you. I’ve read what’s out there on WP, and none have come close to offering what your quick and clear tutorial did. I finished (and loved) Headfirst HTML with CSS and XHTML (yep, I’m a newbie), and with that beginner’s background, I was able to easily follow and really appreciate your tutorial that showed me how to do CSS relevant to WP. I definitely see a niche for a book that’s a hands on tutorial for WP. I’d be the first to buy it! Thanks.
Thanks for sharing this info Jai. It was very useful. Keep up the good work
This helped me a lot, did you mean 950 pixels for the image background in the answer to Dan’s question? 900 would not be wide enough.
I am looking forward to any other tutorials you put together. I will add you to my RSS.
Hi Jai, when i told size I was refering to height, but my question was asnswered in Dan’s question. Thanks!
Great job Jai. I’ve been trying to improve my skills in CSS lately. It’s enjoyable to learn it, specially in cases where I have to edit few things in the style of my blog. However I am still unable to grasp how CSS can be coded to meet all browser specification. I wish you have a look at my blog & drop me a hint on how to solve the page exceeding with error on IE6 and 7, not to mention that on Firefox it looks very much different.
I notice sometimes that a small modification in the CSS code may let the sky fall!
Thanks again and I’m looking for more future lesson. Hope I made your day
Thank you so much for the enlightment! Will put it to a good use. Do you know any good tutorial on creating custom wordpress template by any chance? I know HTML and CSS, but had no idea about PHP. So yea, is there any special “functions” or code to built a Wordpress template? Thanks.
That was great! It is like the first really very important thing to really get you started into the very important zone where this thing of customizing or creating blog themes, and then a lot more than that, starts for real.
I was already good at html and familiar with general css, styles sheets, your explanation bridged very well toward themes creation and also, although not directly, with php.
Thanks, really!
things are twice as good when they are short.
Your explanation was complete and SHORT.
Thanks!!!!!!!!!!!