Html – How to make a sidebar that stretches to the page length

csshtmllayout

If I set a min-height: 700px; on my sidebar, it works fine, however if the content length goes beyond 700 px, then the sidebar ends and the page content takes up the full width of the page. I want the sidebar to go down the length of the page, as long or short as the content is. How can this be done?

Here's my sidebar's css code:

#sidebar
{
    float: right;
    min-height: 700px;
    min-width: 25%;
    background-color: #FFFFFF;
}

Changing the height to 100% causes the sidebar to disappear completely.

Here's the html code;

<bod>
  <div id="sidebar"></div>
  <div id="content">Content here....</div>
</div>

Best Answer

Give it a position:absolute; with bottom:0px;

Check it out : http://jsfiddle.net/AliBassam/McJG8/

HTML

<div id="parentDiv">
  <div id="content">Content here....</div>
  <div id="sidebar"></div>
</div>

CSS

#parentDiv
{
    position:relative;
    min-height:700px;
}
#sidebar
{
    position:absolute;
    right:0px;
    bottom:0px;
    top:0px;
    width:100px;
}

The #parentDiv now have min-height:700px; if its stretched by its contents, the #sidebar will stretch as well.

Related Topic