css - HTML - Sidebar not filling 100% of screen -
i have sidebar taking enough space content contains rather taking 100% of wrapper contains elements, image below should across mean:
here of code i'm working with:
html
<body> <div id="wrapper"> <div id="top"> ... </div> <div id="topnav"> <... </div> <div id="banner"> <img id="img" src="images/2for20.png" alt="banner1" /> </div> <div id="subbanner"> ... </div> <div id="content"> ... </div> <div id="rightside"> <p>this sidebar</p> </div> <div id="footer"> <p>© copyright 2015 celtic ore, rights reserved</p> </div> </div> </body>
css
#wrapper { width:1000px; height:100%; margin:0px auto; background-color:#efefef; } #rightside { float:right; position:relative; width:220px; height:100%; background-color:#efefef; } #rightside img { vertical-align:middle; } #rightside h2 { padding:10px 0px; } #rightside p { padding:10px 0px; } #footer { width:100%; padding: 10px 0px; background-color:#000000; float:left; } #footer p { color:white; text-align:center; }
this works me:
.container { overflow: hidden; .... } #sidebar { margin-bottom: -101%; padding-bottom: 101%; .... }
Comments
Post a Comment