Understanding Floats in CSS – Making a 3-column layout

Published On April 11, 2008
43 Comments Leave a Comment
CSS Tutorials

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.

My CSS Layout
	<link href="style.css" rel="stylesheet" type="text/css" />
<div id="wrapper"></div>
<!--end wrapper-->

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="wrapper">
 <div id="header">
</div><!--header-->

 <div id="sidebar1">
</div><!--sidebar1-->

 <div id="content">
</div><!--content-->

 <div id="sidebar2">
</div><!--sidebar2-->

 <div id="footer">
</div><!--footer-->
</div><!--wrapper-->

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.

CSS 3-column layout

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 🙂

43 replies on “Understanding Floats in CSS – Making a 3-column layout”

Thanks for this tutorial, I had worked through two books trying to clarify the concept but didn’t really get it till going through this post. Very brief, clear, and helpful.

Hey! I’m using FF 3.6 because I’m on Mac OS 10.4– I’m sure it is not my computer as I can see all of your code examples, but your first code example you provided (DOCTYPE) is missing. I can’t see it, but I can see the rest of the code.

This is great–so many 3 column CSS layouts leave out the float part.. they just give you a static page and expect you to figure out all those details. This is one of the very few layouts that at least in the browser where i’m viewing it… it would be acceptable in a corporate setting. Few or no businesses would actually accept one of those fluid center or completely fluid layouts… they end up looking horrible too easily–I think you in most cases (for a business) need a layout with some strict minimums, but you need it to also be expandable for those readers with poor vision that love to explode the text.. which breaks any poor CSS layout which also leaves me wondering why I just didn’t stick with tables

topher Reply

great concept. However, what about 100% so the footer sticks to the bottom of the browser window? I keep getting the ghost scrollbars in IE. 🙁

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?

Nischal Reply

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%;

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.

Jai Reply

@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?

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.

Jai Reply

@stan: You place the code in the mypage.html file between the starting and ending DIV tags.

for example, between

and

Chris Reply

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.

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.

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!!!!!!!!!!!

Jai Reply

@Dan: That is a very good question Dan. Ideally, we do not give the height parameter to the columns because when the content is more, it will go out of the div since we have specified a specific height. So to avoid that, we use background-image concept.

To give it a look of three columns, make an image (1px height and 900px width) which should have three partitions (sidebar1-blue color, content-white color, sidebar2-blue color) and tile it vertically (repeat-y) for the wrapper tag. Now you will not have to specify colors in the CSS for any of your bars because the image will do that for you by tiling across the y-axis.

I hope that clears it.

Extremely great! A CSS breakthrough…I’ve been having a lot of trouble with floating divs but this is going to help me out create a theme. Thank you! I always had trouble with my divs breaking up…

Jai Reply

@igmuska: Absolute layers works in a completely different way. They cannot be wrapped since you have to actually draw out the coordinates where to put them on the page.

Jai, you have helped me get closer to a major CSS breakthrough, THANKS…I still am having difficulty with wrapping an absolute positioned element within an relative positioned element. Any advice?

Jai Reply

@Jose: You have to divide and do the maths. For example, if your fixed width is 900px and you want all the inner divs to be 300px each then just give them width:300px; each. Or, if you want padding in them, say, 10px in each side of the div, just reduce 20 from the width of each DIV. So, width for each div will be 280px.

Hope this helps you.

Leave a Reply to Jason Geek Cancel reply

Your email address will not be published. Required fields are marked *