Clean Semantics: the three column attempt

.. when things get ugly?

In my previous posts about Clean Semantics I have explained a bit about my philosophy of Clean Semantics. Trying to get rid of the div tag soup and only use the real semantic markup. Driving it to the extreme (I know) and literally avoiding any tag that has no direct semantic value. Call me a Semantic Fundamentalist.

I have shown markup for a simple layout with a header, a menu and a content area. But I left with a cliff hanger regarding a three column layout.

Three columns: first attempt

My first attempt was using some form of positioning to place the columns left and right. Positioning the top element of both the left and right column was easy: place them just below the header and to the left or right. But I could not really find a way then place the next elements below these first. There is no way of knowing the height of the elements. So I sighed and came up with the old fashioned way: wrap the columns in a <div>. Sigh! Here's the example of a three column design using only two <div>'s.

As you can see it works. I have placed some different types of elements in there and it behaves all in all like expected. And only two <div>'s! And the content is a nice order. The columns follow after the main content, which is good practice for search engines. But the order can be swapped about, layout stays the same.

But those two <div>'s in there are not semantic. So for a Semantic Fundamentalist, like me, they are two too many. It did not give me the feeling of having achieved anything.

Three columns: second attempt

So I decided that positioning was not the right solution path for the problem and I returned to good old floating.

I mentioned that it would be relatively easy to combine my first example with the menu on the left with my third example with a horizontal menu. Then if I just add some right floated content I would be well on the way.

The sub menu has the same styling as the menu in the first example. The content on the right is just floated to the right and with clear to the right to move the item below the previous one.

float:right;clear:right;

This was indeed not too difficult, see the example.

I may have lost the source order independence, but still I can live with that. I also have a feeling that this could be the right approach.

Three columns: third attempt

In the previous example I have take a small step with floating and clearing to the right. So let's do the to the left as well.

float:left;clear:left;

Sounds just so simple. Why I ever considered positioning I don't know. My first angle of attack is usually floating things into place.

So, the simple floating and clearing left and right could do the trick. Here is what I made of that: three column layout with no <div>'s. Do me a favour and view it using Internet Explorer 6. Yes, you read that correctly. In Internet Explorer 6 this markup and styling works. In Firefox things go a bit awry. To me it seems the floating and clearing rules are interpreted differently. And IE7 does the same thing as Firefox, so maybe the bus is in IE6? Hmmm, too bad.

I have only tested the layout in Firefox and IE6 and IE7 so far, so using a different browser will probably show even more possible outcomes.

But which is right? IE6 or Firefox & IE7?

Remains the question: which browser does it wrong? Or more simple what do the rules state as correct floating behavior?

Let's look up the W3C rules in CSS 2.1.

The W3C's CSS 2.1 definition of float

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property).

In the image this rules is visualized. When floating to the right, the elements go all the way to right until they can not move any further, because they reach the right edge of the containing element or they are stopped by another right floated element. When the element is cleared to the right it does not allow for any elements to be on the right, it clears those away or rather takes the easy way out and moves down a bit so that it can snuggle up against the right edge of the containing element.

When I then combine the right float and cleared elements with left float and cleared elements I expect something like the picture below. A neatly stack of elements on the left and right side of my containing element. Just like IE6 shows it. So, in my interpretation Firefox and IE7 have a bug rendering the markup and styling. It is a hard conclusion to draw here, but I think it is true. Looking at how the markup is rendered in Firefox and IE7 I have the feeling that somehow elements that are cleared on the right are also cleared on the left, but not all. The last floated element to the right has no influence on the vertical position on the first left floated element. Multiple floated and cleared elements to one side apparently make Firefox and IE7 only remember the vertical position of the last element. Anyway, this approach is not rendered consistently enough across different browsers to use it. Let's forget it.

What to do?

What can I do now? It seemed to be going so well. Can I still find a workaround for this problem or should I just let it be and stick with using two <div>'s?

I'm not giving up yet. I will give it another try. Meanwhile, if anyone with another browser can tell me if that browsers shows my three column layout with no <div>'s correctly or not, please do. The comments are open.

Update

Now that I have Safari 3 beta for Windows on my machine I see exactly the same appearance as in Firefox. So, taking into account the execllent performance of Safari in the area of standards compliance rendering I think I must take back my conclusion to the bug in Firefox.

The correct rendering of Internet Explorer is just a lucky bug.

This article is part of a series of four

1. First steps towards Clean Semantics
2. The shape of Clean Semantics
3. Clean Semantics: the three column attempt
4. Clean Semantics in practice (Will follow shortly).