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
thanks
If you guys are already taking the trouble to code your own site/blog’s theme, might as well search for tutorials that put content div ahead of sidebar divs. SEO wise, its supposedly better to have content positioned as close to the top as possible. All I know is, there ain’t a lot of 3-column tutorials that does content div first. Perhaps you should write one, Jai?
did u check the design in ie6 and ie 7
Very nice guide, one thing, when you add content to that page, will it extend all the way until the content’s end? The sidebar and the content page? If not can you tell me that code for extending it. I think it might be height:100%;
For absolute positioning you would do something like the following:
Left content center content right contentAnd then CSS like this:
div#innerWrap { position: relative; margin: 0; padding: 0; } div#innerWrap #left { position: absolute; top: 0; left: 0; width: 150px; } div#innerWrap #center { position: absolute; top: 0; left: 150px; width: 300px; } div#innerWrap #right { position: absolute; top: 0; left: 450px; width: 150px; }I would add some padding and adjust widths accordingly though to make your styles nicer.
Follow Up
Turns out it’s not that easy in Techicon. The style sheet calls first for the sidebar file, which then calls for the three sidebars in order. My recommendation would be to delete the sidebar file entirely, and call for each individual sidebar from within the style sheet itself. That way you can order each page element as you wish by editing the style sheet.
For you it’s a compliment. For most other WordPress theme designers…
BTW, can’t find the sign-up form for your forums. got a question regarding converting a static layout to fluid. Since you did so well with the layout tutorial I’d like to urge you to do one on static to fluid and fluid to static themes.
@Alan Kellogg: Yes. You are right on the dot. Btw, I did not get your question at the end…Is that a compliment or what
Jai,
So when calling for divisions when the division is called for in the HTML file is what matters. So by editing the Page.html file in Techicon so the sequence is…
[div id="sidebar 1"]
[/div]
[div id="content"]
[/div]
[div id="sidebar 2"]
[/div]
[div id="sidebar 3]
[/div]
(where “[” stands in for “<”)
…would give one a layout of sidebar, content, sidebar, sidebar. Just want to be sure.
BTW, you make things comprehensive and comprehensible. Are you sure you’re a WordPress theme designer?
…
@Eddie Poh: No, the layout change will not affect your rankings as long as your textual content does not change.