In web design two-column sites are very widely used. One trouble that most designers encounter when coding their layout is having the two columns work together in harmony. Often one bumps the other down or floats over one another. The purpose of this simple tutorial is to make the two columns work together. To achieve this you will need to create 4 class (3 of which are containers). The first is the wrapper which will hold the 2 floating containers. The main trick behind this method is that instead of having the two floating columns float in opposite directions, they both float to the left.

Now let’s start with the wrapper. Our wrapper will contain our full dimension to prevent overflow; let’s call this float_container. Now let’s give it some definitions:

1
2
3
4

.float_container {
width: 600px;
margin: 0 auto; /*centers the container to the screen*/
}

.float_container {
width: 600px;
margin: 0 auto; /*centers the container to the screen*/
}

Now let’s create the left most column let’s call it column1 and give it some definitions:

1
2
3
4

.column1 {
float: left;
width: 200px;
}

.column1 {
float: left;
width: 200px;
}

Now let’s create the second column, column2, and give it definitions:

1
2
3
4
5

.column2 {
float: left;
width: 390px; /*Note 1*/
height: 1%; /*Note 2*/
}

.column2 {
float: left;
width: 390px; /*Note 1*/
height: 1%; /*Note 2*/
}

*Note 1 – I purpose did not add 10px for the sake of keeping the float in tact, if you use the exact 400px, it will not float next to column 1 on certain browsers.
*Note 2 – This 1% is to fight and fix the peekaboo bug that IE6 presents us.

Now to clear all of our floats at the end of the document so that it does not interfere with the rest of our page:

1
2
3
4
5
6
7

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Now let’s add the html

1
2
3
4
5
6
7
8
9

<div class="float_container clearfix">
   <div class="column1">
      Column 1 content
   </div>
 
   <div class="column2">
      Column 2 content
   </div>
</div>

<div class="float_container clearfix">
   <div class="column1">
      Column 1 content
   </div>

   <div class="column2">
      Column 2 content
   </div>
</div>

You can see how this works here: http://www.sazzadhossain.org/demo/projects/jorsek/column_theory.html

The method was first developed by 960gs but then I modified it for Jorsek Software LLC. back when I worked for them.