CSS problem

I have a problem with my css template..

This is what i want:



But I can’t figure how to have the content/sub container div follow the browser height, so it has a margin of something like 20px..

When i try i end up with a scrollbar because it’s pushing the margin outside the browsers 100% height

My only solution so far is to set a static height on the div, but when I open something like the image manager from maxigallery, the maxigallery-div pushes it’s content outside/below the content-div

What should I set the height of the body and html to? and how do I set the correct margins, paddings and heights on the different divs?

I am not sure why you would do this. Trying to force the bottom of a design to the browser pane even if there is not content doesn’t seem to make sense. But you could fake it by making the the content and subcontent divs really long and using a div absolutely positioned at the bottom that has a border that will match that of the content and subconent panes.

The reason I have a problem with this is that you have no idea what size the user’s screen is and so your design may not work in all browsers. My main screen is a 1280X800 laptop with a full browser pane (with toolbars) that has a height of no more than 700px. In my opinion if there is no content to fill the divs you will have an awful lot of whitespace.

If i do not make it follow the bottom of the browser, my content+sub div will be as small as 2em in the height if there is no or very little content on one page, so i need to fill with the div.. I would rather look at a div with background and border, without content, than look at a very small div and a lot of background..

and besides.. if I remove the fixed height, the bottom of the content-div will not follow the bottom of the sub-div (but that is probably just a common two-column float layout problem)

I’ve settled with a half solution..

Since the site I’m doing is a private site for about 30 people and I know they’re all using either firefox or IE6+, I’ve used the Equal Columns technique from the "One True Layout" css-guide.

This means the content div will only follow the height of the content, but at least the content and sub will have equal heights.. and there probably won’t be any pages with a noticeable small amount of content anyway..

This is clearly just a simple solution only possible because I’ve got a very small spectrum of visitors so if any one else has a solution to my problem I will be very glad to hear from you.

Thank you

If this is a private site why not (can’t believe I am saying this in a public forum) use a table.
Kevin Yank’s article got me thinking about the use of tables and in your case, because it is essentially a closed intranet, tables won’t harm anyone. BTW It is nearly essential to use at least a single table for Email newsletter templates.

All the best,

Jay