Question

I have created a sidebar and content area using the following code.

.container {
  overflow: hidden;
}

aside {
  width: 185px;
  background: lightgreen;
  float:left;
  padding:5px;
}

.content {
  background:lightblue;
  padding:5px;
  margin-left: 195px;
}

And the Html

<div class="container">
  <aside>  
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </aside>

  <div class="content">   
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </div>

</div>

It works. But the height of the sidebar is limited to the content area only. How can I give the background color to the sidebar in full height even if there is no content?

http://jsfiddle.net/mLVBE/

Answer 1

Basically you add height 100% to html, body, container and your aside.

Here’s an updated fiddle for you:

http://jsfiddle.net/mLVBE/3/