<$BlogRSDUrl$>

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
z-index
so you can see it. All done :)

Permanent link and Comments posted by Rob Cornelius @ Tuesday, November 29, 2005

Comments: Post a Comment


Links to this post:

Create a Link

links to this post
    follow me on Twitter

    My recent photos

    Archives

    Creative Commons License
    This work is licensed under a Creative Commons License.

    RSS feeds and things

    Feed Button Help

    This page is powered by Blogger. Isn't yours?

    contact the author

    rob cornelius can be contacted by email use his name with an dot and googles web based email domain