CSS Problem, fixed contentarea with left and right sidebar?

Question

Hey guys, i really need your help with a CSS-Layout. I tried a few time, however i've no chance (and actually no idea how) to solve it. Moreover I don't even know if it's possible the way I want it!

The #mainContent should always be centered horizontally in the browserwindow. It should be 1024px in width and a 100% of the windowheight. Now the difficult part. I need two divs, one on the left side, one on the right side of the #mainContent. Both should be 100% in height, but should ALWAYS have the rest of the browserwindow. If the browserwindow has only 1024px in width #navLeft and #navRight are invisible.

Is that even possible, if so, HOW? thank you

Answer 1

1024 is a poor choice of widths. Monitors with 1024 x 768 resolution will ALWAYS get vertical scroll bars. 960px wide is the common choice.

You put the whole thing in a wrapper DIV:

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

Inside you have three DIVS, floated-left with specified widths.

Controlling the visibility, based on the user's browser width needs to be done via JavaScript. CSS alone cannot do this.

CORRECTION: this article explains how, and it's something I never knew you could do.