Højde på menu og indhold skal følges ad
Jeg har en webside som kan ses på http://home10.inet.tele.dk/falcken/test.htmSiden består at 3 "rækker" opbygget med DIV'er.
"Række" nr. 3 består af 3 "kolonner" som beskrevet her:
Venstre "kolonne" er en menu
Midterste "kolonne" består af 3 "rækker" (DIV'er)
Højre "kolonne" er blot til pynt.
Det er række nummer 3 i den midterste kolonne der volder kvaler. Række nummer 1 og 2 har en fast højde, men række nummer 3 vil jeg gerne automatisk følger højden på menuen. Og iøvrigt også omvendt. Altså at menuen følger højden på hele den midterste kolonne.
HTML-koden:
<body>
<div id="row1">Titel</div>
<div id="row2">Navigation</div>
<div id="row3main">
<div id="columnleft">
<p>menu 1</p>
<p>menu 2</p>
<p>menu 3</p>
<p>menu 4</p>
<p>menu 5</p>
<p>menu 6</p>
<p>menu 7</p>
<p>menu 8</p>
<p>menu 9</p>
<p>menu10</p>
</div>
<div id="columnmiddle">
<div id="columnMiddleRow1">række 1</div>
<div id="columnMiddleRow2">række 2</div>
<div id="columnMiddleRow3">række 3<br><br>
Hvorfor kan højden på denne række ikke følge højden på menuen? Og omvendt!
</div>
</div>
<div id="columnright">
<p>Right</p>
</div>
</div>
</body>
</html>
CSS-koden:
html {
height:100%;
}
body {
background-color: #ffffff;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
height:100%;
}
#row1 {
height:50px;
width:950px;
background-color:#ffffff;
position: relative;
margin-right: auto;
margin-left: auto;
}
#row2 {
height:50px;
width:950px;
background-color:#003366;
position: relative;
margin-right: auto;
margin-left: auto;
}
#row3main {
width:950px;
position: relative;
margin-right: auto;
margin-left: auto;
background-color:#ffffff;
height:auto;
}
#columnleft{
position: relative;
float:left;
height:auto;
width: 183px;
margin-right:7px;
padding:5px;
background-image:url(columnleft_bg.gif)
}
#columnmiddle{
position: relative;
float:left;
width: 550px;
background-color:#CC9900;
height:auto;
}
#columnMiddleRow1 {
width: 540px;
padding:5px;
height:50px;
background-color:#FFCC99;
}
#columnMiddleRow2 {
width: 540px;
padding:5px;
height:50px;
background-color:#FF00CC;
}
#columnMiddleRow3 {
width: 540px;
padding:5px;
background-image:url(columnMiddleRow3_bg.gif);
height:auto;
}
#columnright{
position: relative;
float:right;
height:auto;
width: 193px;
background-color:#990066;
margin-left:7px;
}
Nogen der kan hjælpe??
