Sidebar følger ikke med content area
Hey folkens. Jeg har lavet noget her, hvor jeg bruger et billede til at have en kant på min venstre og højre border på content area. Det virker fint, bortset fra at når content area bliver større, så følger siderne ikke med i højden.Kan i hjælpe mig ?
html + css herunder.
<body>
<div id="content" style="border:solid 1px red;">
<div id="header">
</div>
<div class="colmask fullpage" style="border:solid 0px red;">
<div class="LeftBorderImage">
</div>
<div class="col1">
col1 col1 <br /> 123 <br /> 456
</div>
<div class="RightBorderImage">
</div>
</div>
<div id="footer">
Foooooooter
</div>
</div>
</body>
--------------------
body {
margin:0;
margin-top:20px;
padding:0;
font-size:90%;
border:solid 1px red;
}
/* header styles */
#content {
margin: auto;
width: 822px;
}
#header {
clear:left;
float:left;
width:100%;
height:197px;
overflow:hidden;
border:solid 0px black;
background-image: url(Images/TopBanner.jpg);
}
.colmask
{
clear:both;
float:left;
width:100%;
overflow:hidden;
border:solid 0px red;
}
/* common column settings */
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:.0em 0 0em 0;
overflow:hidden;
border:solid 0px blue;
}
.LeftBorderImage
{
float: left;
background-image: url(Images/ContentLeftSideBar.gif);
height: 100%;
width: 17px;
background-repeat: repeat-y;
}
.RightBorderImage
{
float: right;
background-image: url(Images/ContentRightSideBar.gif);
height: 100%;
width: 16px;
background-repeat: repeat-y;
}
/* Full page settings */
.fullpage {
background:#fff;
}
.fullpage .col1 {
width:788px;
}
/* Footer styles */
#footer {
clear:both;
padding:1em 2%;
border-top:1px solid #ccc;
border:solid 2px green;
}
