I'd like #right to take all the available space to its right, and footer to be within bounds of #right, which itself should not extend beyond #bottom. #content can be of any size and should just show a scrollbar when needed, #head and #footer should be at a fixed position, ie. top/bottom of #right.

I'm afraid I'm more fluent in javascript than I am at css, so I could use some pointers here :)

And just checking - does #left have to be 100px?
–
MichelleDec 24 '12 at 9:44

I'm guessing you're thinking along the lines of proportionally dividing percentages? I would rather steer clear of that option because of different aspect ratios which could mess up the layout.
–
ArjanDec 24 '12 at 9:54

3 Answers
3

You can adjust the percentages of #left and #right. So long as they add up to 100%, this will work.
The same goes for #head, #content, and #footer. I assume you want the content to be larger, so I set that to 80% for you.

If you want to set a manual width for #left, you could fix this by making #bottom a table, and both #left and #right table cells. Then you need to wrap #right in an outer div (table) so that the content inside can be displayed as table rows. #top will have to be moved into #bottom in order to avoid overflow.
However, I'd advise against using tables... They're outdated and lack support in certain browsers.

I'm well aware of the table issues, but your last example comes closest to what I need, but the total size seems to extend beyond the page, also the percentages in head/footer are not an option, but I'm guessing that can be fixed using the same table magic..
–
ArjanDec 24 '12 at 10:07