BeeDeeDubbleU - 6:53 am on Oct 5, 2011 (gmt 0)

Let's say that you create three appropriate styles for col1, col2 and col3. You would then create three divs styled as col1, col2 and col3. These should be laid out as specified.

<div id="col1">
.........
.........
</div>

<div id="col2">
.........
.........
</div>

<div id="col3">
.........
.........
</div>

<!--Now add your clearfix to "square off the above three columns -->

<div id="clearfix"></div>

<!--Now add the next three columns (properly aligned due to the clearfix div above) -->

<div id="col1">
.........
.........
</div>

<div id="col2">
.........
.........
</div>

<div id="col3">
.........
.........
</div>

In your CSS your clearfix style should look something like,

.clearfix {
clear: both;
}

What happens is that the clearfix basically draws a line under the longest of the cols and you can start another three cols under that.

(hard to explain and I am no expert.)