CSS: my side bar overflow the container div's border when I set it's height to 100%
- by mnml
Hi,
My side bar overflow the container div's border when I set it's height to 100%,
I would like to know if there is any way I can have it's height 100% minus some px.
Here is the source:
<div id="main">
<br /><br />
<div class="content">
<div id="sidecontent">
<h1 id="title">Title</h1>
*****
</div>
<div id="sidebar">
<div class="sidebox">
****
</div>
</div>
</div>
<div class="bottom"></div>
</div>
#main {
position: relative;
background:transparent url('/public/images/main_bg.png') top left repeat-y;
padding:37px 37px 37px 37px;
margin-left: auto ;
margin-right: auto ;
width:940px;
min-height: 363px;
}
#main div.top, #main div.bottom {
height:70px;
width:1015px;
position: absolute;
left:0px;
}
#main div.content {
padding:0 15px 0 15px;
}
#sidecontent {
width: 675px;
}
#sidebar {
background: #fff url('/public/images/bg_side.png') top right repeat-y;
position: absolute;
height: 100%;
right:34px;
top:42px;
width: 200px;
padding: 10px 10px 0px 40px;
z-index:50;
}
.created_at {
color:gray;
}
.sidebox {
margin-bottom: 5px;
}
#main div.top {
top:-70px;
background: transparent url(/public/images/main_top.png) bottom no-repeat;
}
#main div.bottom {
bottom:-70px;
background: transparent url(/public/images/main_bottom.png) top no-repeat;
}
