XHTML and 3 Column Layout

For a while now the CSS markup on Compound Theory has caused some interesting display bugs to occur on IE, and particularly on Mac IE.

I've redone the whole CSS structure, and I think this is a much better (less bugs?) way than the previous.

The originial incarnation was based on the principle of floating one nav bar on the left, one nav bar on the right, and keeping a middle section for the content.

E.g.

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

div.right {
    float: right;
    width: 200px;
}

div.middle {
    margin-left: 210px;
    margin-right: 210px;
}

However, apon shrinking the size of the browser window, often the middle section would drop below the left, or really wide content would shift the middle section down the page.

I tried everything known to mankind to stop it from shifting down, to no avail.

Finally my friend Adrian shot me over to www.glish.com and I discovered a xhtml layout that used absolute positioning for the outer columns.

Simply put:

div.left {
    position: absolute;
    left: 5px;
    top: 50px;
    width: 200px;
}

div.right {
    position: absolute;
    right: 5px;
    top: 50px;
    width: 200px;
}

The full details can be found here, however by using absolute positioning to line up both of the left and right columns for my nav bars, the issues inherent with using a float no longer applied.

Definatley the way to go.

Now I still need to sort out the form display issue on a Mac...

Add Comment

Name * Email URL Code

Enter Code * Comment *