Ens højde på containere
Jeg har flg. eks.:CSS:
body {
background-color: orange;
text-align: center;
}
#wrapper {
width: 1000px;
background-color: white;
margin: 0 auto;
border: 1px solid black;
text-align: left;
}
#header {
height: 80px;
padding: 5px;
background-color: #CCCCCC;
}
#main {
background-color: white;
padding: 10px;
margin: 0 0 0 170px;
}
#menu {
float: left;
width: 160px;
background-color: #ffff99;
padding: 20px 5px;
}
HTML:
<div id="wrapper">
<div id="header">
<h1>Overskrift</h1>
</div>
<div id="menu">
<ul>
<li><b>Hjem</b></li>
<li><a href="side1.html">Side 1</a></li>
<li><a href="side2.html">Side 2</a></li>
<li><a href="side3.html">Side 3</a></li>
</ul>
</div>
<div id="main">
<h1>Overskrift</h1>
<p>Sidens inhold</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>
</div>
</div>
Hvordan får jeg menu-div'ens højde til altid at følge højden på main?