Anexxion
08-11-2008, 03:42 AM
I need my CSS sidebars to go full page height, not just browser height:
http://i37.tinypic.com/2qnrsk8.jpg
CSS:
#gheader {background: #fff url(http://www.voigrafic.com/warez/gheader.gif) repeat-x top; height:38px;}
.leftwing {background: transparent url(http://www.voigrafic.com/warez/leftwing.png) left; height:174px; width:305px; background-repeat:no-repeat; position:absolute; top:0px; left:0px;}
.rightwing {background: transparent url(http://www.voigrafic.com/warez/rightwing.png) right; height:174px; width:305px; background-repeat:no-repeat; position:absolute; top:0px; right:0px;}
.leftrep{
background: #000 url(http://www.voigrafic.com/warez/leftrep.gif) repeat-y;
position:absolute;
top:0;
left:0;
width:40px;
height:100%;
padding: 0px
}
.rightrep{
background: #000 url(http://www.voigrafic.com/warez/rightrep.gif) repeat-y;
position:absolute;
top:0;
right:0;
width:40px;
height:100%;
padding: 0px
}
<div id="gheader">
<div class="rightrep"></div>
<div class="leftrep"></div>
</div>
<div class="leftwing"></div>
<div class="rightwing"></div>
http://i37.tinypic.com/2qnrsk8.jpg
CSS:
#gheader {background: #fff url(http://www.voigrafic.com/warez/gheader.gif) repeat-x top; height:38px;}
.leftwing {background: transparent url(http://www.voigrafic.com/warez/leftwing.png) left; height:174px; width:305px; background-repeat:no-repeat; position:absolute; top:0px; left:0px;}
.rightwing {background: transparent url(http://www.voigrafic.com/warez/rightwing.png) right; height:174px; width:305px; background-repeat:no-repeat; position:absolute; top:0px; right:0px;}
.leftrep{
background: #000 url(http://www.voigrafic.com/warez/leftrep.gif) repeat-y;
position:absolute;
top:0;
left:0;
width:40px;
height:100%;
padding: 0px
}
.rightrep{
background: #000 url(http://www.voigrafic.com/warez/rightrep.gif) repeat-y;
position:absolute;
top:0;
right:0;
width:40px;
height:100%;
padding: 0px
}
<div id="gheader">
<div class="rightrep"></div>
<div class="leftrep"></div>
</div>
<div class="leftwing"></div>
<div class="rightwing"></div>