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:

enter image description here

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

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - .htaccess mod_rewrite for dynamic url which has domain names -

Website Login Issue developed in magento -