Painted column

There is another method that has been used by authors to make floats look like equal length columns - at least for fixed width columns. It involves a specially prepared background image for the parent of the floats. No fiddling with nuclear family iterations that we have just seen (or other tactics that can get a bit complicated).

As we have seen, if a parent is forced to grow height to cover the tallest of its floats, then, of course, it must cover all the sibling floats on the same horizontal line. Taking advantage of this, one can paint the parent with a special striped background. If there are two columns, one makes a background image a mere 1px high to cover the left most column. The non imaged background colour of the parent will suffice for the second column.

CSS:

.showWrap {
background: #fff url("pics/ocean_200.gif") repeat-y;
overflow: hidden;
}

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

.showContent {
margin:  0 0 0 200px;
color: #003;
background: #fff;
}

HTML:

<div class="showWrap">

<ul class="showNav">

<li>List item</li>
...
</ul>

<div class="showContent">

<h1>The markup</h1>

<p>Here is placed the markup of the whole page.</p>
<p>Of course, you would have your own content.</p>
</div>

</div> 

Fig 1. The main thing to note about this is that the container of the whole show (the box with the blue and white columns) has a background image, the image is prepared to be a certain width, 200px in this case, and set to repeat vertically. The wide white content column has the backgound colour that is set for the main container, white in the example. Where the repeating image does not show, the white shows. If you want to add a border, by the way, you can just add a tiny bit of dark colour at the right end of the image!

Here is how the above technique works when the content is less than the navigation:

Fig 2. Here a case of the white column having less "content" height than the navigation column. No change to the CSS.