Dynamic height for a DIV with CSS

Hi there,

I’m lost... Can you help ? I try to have a left box for menu with a dynamic size. I could easily to this by using table cells, but I want to stick to standards. Therefore, cells are out of the question.

The page is on http://www.sissaoui.com/site

The code is the following :

The template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<base href="[(site_url)]" />
<title>[(site_name)] | [*pagetitle*]</title>
{{css_sissaoui_dark}}
<style>
#topmenu {
background-image: url("[(site_url)]images/sissaoui_dark/tabs_accueil.gif");
}
</style>
</head>
<body>
<div id=main>
<div id=central>
<div id=header>
{{sissaoui_dark_header}}
</div>
<div id=leftbox>
{{sissaoui_dark_leftbox}}
</div>
<div id=footer>
{{sissaoui_dark_footer}}
</div>
</div>
</div>
</body>
</html>

The sissaoui_dark_leftbox chunk:

<div id=leftbox_top>
</div>
<div id=leftbox_center>

</div>
<div id=leftbox_bottom>
</div>

The css_sissaoui_dark chunk for all this:

<style type="text/css">
* {
font-family: verdana, tahoma, arial, helvetica;
}

body {
margin: 0;
padding: 0;
height: 100%;
}

#main {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background:fixed;
background-image: url("[(site_url)]images/sissaoui_dark/bg_tile.jpg");
background-repeat: repeat-x;
}

#central {
width:800px;
height: 100%;
margin: 0 auto;
}

#header {
top: 0;
height: 55px;
width: 800px;
background-image: url("[(site_url)]images/sissaoui_dark/sissaoui.com.gif");
}

#topmenu {
position: relative;
top: 13px;
left: 331px;
height: 42px;
width: 426px;
}

#footer {
position: absolute;
bottom: 0;
font-size: 8pt; color: white;
height: 14px;
}

#leftbox_top {
top: 0;
height: 16px;
width: 164px;
background-image: url("[(site_url)]images/sissaoui_dark/leftbox_top.gif");
}

#leftbox_center {
position: relative;
width: 164px;
height: 100%;
background-image: url("[(site_url)]images/sissaoui_dark/leftbox_bg.gif");
}

#leftbox_bottom {
position: absolute;
bottom: 14px;
height: 17px;
width: 164px;
background-image: url("[(site_url)]images/sissaoui_dark/leftbox_bottom.gif");
}

</style>

So my problem is mainly there:

#leftbox_center {
position: relative;
width: 164px;
height: 100%;
background-image: url("[(site_url)]images/sissaoui_dark/leftbox_bg.gif");
}

For now, the leftbox_center settings have a 100% height. But it is not taken in account. The div has in really no height at all (it should be an orange background between the top and down left orange pictures). I wan’t it to use all the usable space.

Why doesn’t the 100% height work. How can I make it work ? I tried with position-absolute. In that case, the 100% height is in fact equal to the body height. Therefore, the orange box goes down below the page border...

Please.heeeeeellpp... ;-) I’ve lost already some hours trying to figure out how to manage this issue...

starting with this may be helpful.. http://csstinderbox.raykonline.com/demos/fixed-1c2/fixed-1c2.zip

Hi try writing like this



it should work,tell me what happend

Regards

ehh maybe my ignorance, but why is your main css in a chunk? (the css_sissaoui_dark chunk )
Sorry, my ignorance indeed!

Looking at the actual page code and looking at the code you posted, they are two different pieces of code.

Let me ask you are you trying to have a page that looks like the screenshot below?

If so there is some stuff missing from your code.

Let me know if you want help or if your goal differs from my capture.