In the modern web era XHTML and CSS based webdesigns are getting more and more popular. The advantages are obvious:

• Cleaner HTML sourcecode
• faster webpages
• higher accessibility
• …

The problem is, that there is a whole bunch of directives that you have to learn first, and once you have learned them, you realize that CSS does not always behave the way you expect it to or browsers interpret it different - you have to write workarounds.

But often people encounter these problems because they just don’t understand what the CSS code they are writing is actually doing.

One scenario, that is not necessarily self-explanatory for CSS beginners is how to put two div boxes next to each other - a simple two column layout. They want to create a structure like shown in this image.

One of the problems is, that they don’t think in CSS containers yet. What you usually want to do, is having a wrapper, or mother container, around the structure elements (I call them like that. This would be the navigation and content container).
So the structure you are planning should look like this:

The advantage of this wrapping container is, that the navigation and content area always have the same height. This way, if we added a footer underneath it, it would be pushed further down automatically, the more the content expands.

We can also center the design very easily etc., but that would be beyond the scope of this introduction to floats. For now just believe me, that it makes more sense to have a wrapper around the structure elements.

Finally we start to write HTML

So what people now do is to begin and write the markup for that website, which might look like this:

<!-- ... header and other markup -->
<div id="wrapper">
<div id="navigation">
<!-- links here -->
</div>

<div id="content">
<!-- content here -->
</div>
</div>
<!-- ... footer and other markup -->

CSS comes into the game

The CSS they create for this, looks like this:

#navigation
{
float:left;
}

What does this float mean? It basically tells the browser, on which side of the mother element (in this case the #wrapper div) the navigation should be positioned. This is exactly what we want. The content is nicely moved towards the center of the design and you can see the content area. But when we have more content and the height of the content container exceeds the navigations height, it moves back to the left side, which looks like this.

We do not want this to happen, so we need to assign the navigation container a fixed with, and give the content some space on its left side (we “push” it to the right by adding the margin-left):

#navigation
{
float:left;
width:200px;
}

#content
{
margin-left:210px;
}

The problem of not talking to the mother

Yet another problem that most CSS beginners don’t know about is the fatal behavior of floated elements in relation to the mother elements height. We would expect, when the navigation grows in height that the mother element stretches with it, but it doesn’t.
As long as the content container is longer than the navigation container, this effect does not occur, because the content stretches the mother container. But once the navigation is longer than the content, it runs out of the container (see picture).

This is definately not, what we expected and at this point many beginners decide that CSS is stupid and stick with their HTML table designs. But wait, didn’t I say that there is a whole bunch of possibilities out there to overcome weird CSS behavior? Yes!

CSS-Magic to the rescue!

We have two possibilities to make the #wrapper container stretch with the navigation. We could either:

Make it a floating element too

#wrapper
{
float:left;
}

or We could change our markup a little bit

<!-- ... header and other markup -->
<div id="wrapper">
<div id="navigation">
<!-- links here -->
</div>

<div id="content">
<!-- content here -->
</div>
<br class="clear" />
</div>
<!-- ... footer and other markup -->

You may have noticed, that we added the <br /> after both, the navigation and content. Just adding the break does not change a whole lot in our design. But by adding some CSS  (therefore the class “clear”) we can achieve a big effect:

br.clear
{
clear:both;
}

We can make the #wrapper element stretch, too. Why does this happen?

The clear attribute places all elements underneath the floating elements on both sides of it.
Since #navigation is floated to the left side, and the break with clear:both moves when there are floating elements either to the left or the right, it moves down and stretches the mother element #wrapper. The image on the right side illustrates this.

Which version should you use?

This depends on the scenario. Both versions have advantages over the other. In the first version, you have to add a float to the #wrapper element, which could destroy its centered position, if it was centered. It would just appear on the left side.

For the second scenario you have to add additional markup, which would contradict the basic idea of xHTML and CSS designs, just having the content structured and do the design with CSS. However in some cases it might be the most elegant way to achieve the desired effect.