<div> tag help

[DarkRanger]

Hi guys,

I would like to know if someone can help me with this. I have in my code a div tag that has a height of 300px. Then, below that, I have a div tag that is 80px high. Below that I want a div tag that dynamically spans the rest of the page. So on resize, it should resize itself and fill the rest of the page.

Is this possible?

Thanks

[DarkRanger]

Heres a visual example of what I want. Not the best, but it gives an idea.

[Glingfram]

You can use a bit of CSS to add it in, like this:

<style type="text/css"
html{ width:100%; height:100%; }
body{ width:100%; height:100%; }
#bottomDiv{
height:100%
}
</style>

Then you'd reference the Div in the HTML like this:

<div id="bottomDiv"></div>

[Glingfram]

Forgot to close off the top Style tags...Opps

[DarkRanger]

I had it that way, didn't work. Decided damn this, I'm using tables.

[maxxis]

Div height:100% does not work unless you have a container to inherit the height from.

Even then it gets tricky to sort the mess out.

You have to set the HTML as well as BODY tags to 100% height. Then set the main container div to 100% followed by dynamic height Div. This however will inherit the height from the body leaving you with some issues. Solve that with overflow:hidden on the container div as well as the dynamic div.

Mind you its not a bad idea to do on all the divs.