Question

I am having problems with a page’s layout. I feel like the answer is simple, and I’ve done quite a bit of work searching for answers and experimenting, but I just can’t seem to nail it.

The page needs a header and footer that are fixed height, but adjust horizontally with the browser window. In between, there is a ‘main’ div that should expand horizontally and vertically to fill all available space between the header and footer (but I can’t have scrollbars appear on the browser window). The ‘main’ div itself should have a left ‘sidebar’ of fixed width and a ‘content’ div taking up the remaining space.

I had an image to attach that explains what I am working towards, but I don’t have 10 rep as a new user so I can’t attach images (due to a ‘spam prevention mechanism’).

I have been playing with a fiddle here: http://jsfiddle.net/pURjN/4/

I’m looking for some pointers and direction. Please feel free to mess with that fiddle.

Thanks,
J

Answer 1

Use absolute positioning. Seems like you don’t necessarily need a “main” div, but it won’t hurt either.

#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
}
#sidebar {
    position: absolute;
    top: 75px;
    left: 0;
    bottom: 75px;
    width: 250px;
}
#content {
    position: absolute;
    top: 75px;
    left: 250px;
    right: 0;
    bottom: 75px;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
}

http://jsfiddle.net/gilly3/pURjN/7/

It works just as well without the extra divs: http://jsfiddle.net/gilly3/pURjN/8/