2 spalter med ens højde
Jeg har en side med 2 spalter og ønsker, at den venstre altid skal være lige så høj som den højre spalte (den højre vil altid være højest).Baggrunden i den højre spalte er et billede - og det kan naturligvis ses når spaltens højde øges. Jeg vil derfor lægge en baggrundsfarve ind, der hvor billedet slutter.
1. hvordan får jeg spalterne til at blive lige høje - uanset mængden af data i højre spalte?
2. Hvordan får jeg farve på den nederste del af min venstre spalte?
Her er min kode:
<link href="styles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="leftcontent">
<p>Tabeller</p>
<p>Hjælp</p>
</div> <!--leftcontent-->
<div id="main">
<form method="post" name="opskrift">
<p>indhold af formular</p>
<div style="text-align: right;"><input name="submit" value="OK" type="submit"><br>
</div><!--OK-->
</form>
</div> <!--main-->
<div class="footertext" id="footer">
</div><!--footer-->
</div><!--wrapper-->
</body></html>
og css-koden:
#main {
height: auto;
width: 620px;
background: #FFFFFF;
border-right: 1px solid #006633;
float: right;
}
#wrapper {
height: auto;
width: 790px;
margin-right: auto;
margin-left: auto;
}
#main p {
font: 12px Verdana, Arial, Helvetica, sans-serif;
margin: 10px;
padding-top: 10px;
}
#leftcontent {
float: left;
width: 160px;
height: 410px;
background: url(images/left_bg.gif) no-repeat;
padding-left: 8px;
text-align: left;
border-left: 1px solid #006633;
}
#footer {
background: url(images/bottom.jpg) no-repeat;
width: 788px;
height: 100px;
border-right: 1px solid #006633;
border-bottom: 1px solid #006633;
border-left: 1px solid #006633;
clear: both;
}
