-1
           <div id="container">
               <div id="sidebar-left">
                  //some content 
               </div>
               <div id ="content">
                //some content
               </div>
            </div>

Take the above piece of code for example. The content in the sidebar and the content divs are stretching them out and giving them length - but why on earth is their parent div, "container", also not being stretched out and given length? If it's possible, how do I achieve this?

http://jsfiddle.net/QA8Z7/6/

styke
  • 2,116
  • 2
  • 23
  • 51

3 Answers3

0

I'm going to take a stab in the dark here and guess that you've got float set on sidebar-left and content, and wondering why the container div isn't containing them? If that's the case, there's various ways to "fix" this problem; this question goes into the various options in great detail.

Edit: Just saw that while I was writing this it's already been figured out, oh well. Nevertheless it might be useful to see the underlying roots of the problem and some alternatives to setting overflow on the container.

Community
  • 1
  • 1
ultranaut
  • 2,132
  • 1
  • 17
  • 22
0

I'm not sure why this is, but if you do 

#container {
    background-color: red;
    overflow:hidden;
}

​then it works. Hope this helps!

heidi
  • 188
  • 1
  • 6
0

just use clear class after you float some div or overflow hidden in parent div always 

<div id="container">
      <div id="sidebar-left">some content </div>
      <div id="content">some content</div>
      <div style="clear:both"></div>
    </div>
Manish Sharma
  • 1,670
  • 14
  • 20
  • This is a more elegant solution as it allows me to have elements poking out from the div as opposed overflow:hidden, which also works – styke Sep 21 '12 at 10:43