DIV height 100% of content problem

[AGus01]

Hi I am having real problems getting the "container" div to display 100% of the contained content inside the div in both IE and Firefox.

If I create a sidemenu div with a particular pixel height inside the container div the page displays the height of that side menu. This looks ok but has the obvious problem that when they re-size the browser window the page is not flexible for the contained content.

Please have a look at the examples to see the nature of my problem.

This first example shows with a fixed height for the contained side menu:

http://www.montenegroparadise.co.uk/test/index3.html

The secound example is when I attempt to set a 100% height for the contaned content and remove the fixed height for the side menu:

http://www.montenegroparadise.co.uk/test/index4.html

 

[Vragabond]

This is because of the nature of your design. Your main content is positioned absolutely, which means that it is enclosed inside the container but it is not part of the container. It has been taken out of the flow and does not contribute to the actual container size. Think of it as a post-it note you would place on top of a page in a book. It would be bounded by that page, but the text on that page in the book would not change because your post-it is there.

You should switch things up. Best options would be:

1. Make both sidebar and main content floated and then clear them both.
2. Make the sidebar positioned absolutely and the main content positioned statically.



___________________________________________________________
[small]Do something about world cancer today: PACT[/small]