Internal Server Error

what the voices in my head tell me to write

Tuesday, November 29, 2005

Its good to be back

Work has been a bit of a drag lately and we have been busy at home. Soon to be a bigger home as well ;)

But I thought I would share this little nugget of CSS that I dreamed up while converting some really bad old table layouts.

The layout was something really bad from about 1999. A coloured top logo and menu area streching the width of the window. The usual left hand menu all nicely coloured in and a block of colour across the bottom. A final little touch was a small "curved corner" at the top of the main content. As it was done with a table whenever the content ended the color stopped on the left hand side and the bottom.

Up until now I would have put in the stripe on the left with a background image and done the top with a background for the top and bottom. Of course with this old table layout I couldnt do that as the strip would have carried on past the footer.

So... I scratched my head and then the solution came to me. Just use the

border

of the <div> containing the main content... set it to the right values for the top bottom and left and 0 on the right. Use a little messing around with min-height and height to make sure its always longer than the menu on the left. I even put the little corner as a background image on the same div and its automagically lined up. Absolutely position the top and side content and make sure you set its