Search code examples
htmlcsssidebar

HTML - Sidebar not filling 100% of screen

I have a sidebar which is only taking up enough space for the content it contains rather than taking up 100% of the wrapper which contains all elements, the image below should get across what I mean:

enter image description here

Here is some of the 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 is the sidebar</p>  
        </div>

        <div id="footer">
            <p>© Copyright 2015 Celtic Ore, All 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;
}
Solution

  • This works for me:

    .container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}