I’m trying to do a seemingly simple webpage layout, but I’m hitting a wall.
I’d like to do everything purely with CSS (no tables to muck things up, and no javascript dynamically resizing things)
I’d like to have:
- A heading with a fixed height
- A footer with a fixed height
- Left sidebar with a fixed width
- Right sidebar with a fixed width
- The whole layout always fills the entire viewport (i.e. if the user resizes the window, the layout grows to the new size)
Put another way:
|< Total width is 100% of viewport >| +--------------------------------------------------------------+ --- | Header with a fixed height | ^ |--------+-------------------------------------------+---------+ | | | | | | | | | Left | | Right | Total | with | Center grows in height/width | with | height | fixed | and has scrollbars if necessary | fixed | is | width | | width | 100% | | | | of | | | | viewport | | | | |--------+-------------------------------------------+---------| | Footer with a fixed height | v +--------------------------------------------------------------+ ---
The parts that are giving me the most trouble are
- Having the sidebars and center have a height equal to the height of the viewport minus the heights of the header and footer
- Having the center have a width equal to the width of the viewport minus the widths of the two sidebars
I have no problem requiring users to have a modern browser.
I’m aware that similar questions to this have been asked before, such as
- Make a div fill remaining space (
http://stackoverflow.com/questions/1717564) - Three row tableless CSS layout with middle row that fills remaining space (
http://stackoverflow.com/questions/1703455) - Create 2 divs, one takes up remaining space (
http://stackoverflow.com/questions/1717564)
… and the conclusion seems to be that there isn’t a good solution. Those answers are somewhat old, so I’m hoping that someone knows the trick now.
Yes, I’m aware that this appears to be trivial to accomplish using a <table>, and after “banging my head against the wall” I did actually attempt to achieve the layout using a table. Unfortunately, with this approach, I have been unable to get the center section to show scroll bars (using overflow: auto) when the content grows too large.)
how about THIS?
it works with konqueror (KHTML), chrome (webkit) and firefox (gecko). like anything recent, it will probably barf under IE6.