Box layout mit div und css

[pinmyplace]

Ich habe folgendes Problem und komme einfach nicht mehr weiter! Wäre nett wenn sich das jemand anschauen könnte.

CSS:

#menu_top{
position: absolute;
width: 196px;
height: 10px;
background:transparent url(img/design/menu_top.png) no-repeat left top;
}

#menu_main{
position: absolute;
top: 10px;
width: 196px;
background: transparent url(img/design/menu_main.png) repeat-y left top;
height: auto !important; /* ie ignores it */
height:100%; /* fix */
}

#menu_footer{
position: relative;
width: 196px;
height: 37px;
background:transparent url(img/design/menu_footer.png) no-repeat bottom;
}

HTML:

<div id="menu_top"></div>

<div id="menu_main">Hallo<br>hallo<br>hallo<br>hallo
<div id="menu_footer"></div>
</div>

Der Screenshot zeigt den Fehler, der mittlere Teil geht bis ganz nach unten, also hinter dem menu_footer durch.

Danke für die Hilfe
Jérôme

[pinmyplace]

AW: Box layout mit div und css

habe es selber lösen können...

.pos1{
 position: absolute;
 top: 0px;
 left: 0px;
}

.pos2{
 position: relative;
 top: 140px;
 left: 0px;
}

.pos3{
 position: relative;
 top: 280px;
 left: 0px;
}

.menu_top{
 position: absolute;
 width: 196px;
 height: 10px;
 background:transparent url(img/design/menu_top.png) no-repeat left top;
}

.menu_main{
 position: absolute;
 top: 10px;
 width: 196px;
 background: transparent url(img/design/menu_main.png) repeat-y top;
 height: auto !important; /* ie ignores it */
 height:100%; /* fix */
}

.menu_footer{
 position: absolute;
 width: 196px;
 height: 37px;
 background:transparent url(img/design/menu_footer.png) no-repeat bottom;
}