Box layout mit div und css

[jakWEB]

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

CSS:

CODE #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:


CODE <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 Anhang anzeigen 2

 

[jakWEB]

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

CODE .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;
}