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.

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.

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 🙂