20
Jun
09

My holy grail

When I awoke this morning I was thinking about layouts with 2 fixed columns and a fluid content in the center with the 2-1-3 order. Some time ago someone started to call this his holy grail, and since then everyone refers to it by that name.

I do not claim this is better the others, or even useful, it’s just how I did it. It is guaranteed to be working in the latest Safari, Opera and Firefox, and guaranteed to be broken in IE(is there something that isn’t broken in IE?). I took the markup form A List Apart’s approach and used my own style instead:

body {
    min-width: 600px;
}

body * {
    outline: 1px dotted black;
}

#container {
    position: relative;
}

#center {
    padding: 0 200px 0 200px;
}

#left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
}

#right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 200px;
}

The side columns are at least as tall as the center, and as far as I know you can add as much padding and margin to everything as you like, as long as you update the padding of the center div to the total width of the corresponding column.

Advertisements


My blog has moved!

My blog has permanently moved to a self hosted Wordpress at http://pepijndevos.nl

This blog will stay around for accidental search engine visitors.

Me

This is me

Blog Stats

  • 22,629 hits

@PepijnDeVos


%d bloggers like this: