-1

My id section box is being displayed at 0px even though i have the box itself and all of its parents set to a height of one hundred percent 

#section_box {
    padding: 0px 10px;
    background: #EDEDED;
    width: 992px;
    height: 100%;
    margin: 0 auto;
}

for full page click here

yunzen
  • 32,854
  • 11
  • 73
  • 106
user1046246
  • 35
  • 1
  • 7
  • 4
    Your page doesn't appear to be working. This is why we prefer you paste *all relevant code* here in the question. – animuson Dec 04 '11 at 04:46
  • Set the container to `overflow:hidden`. See [this](http://stackoverflow.com/questions/5369954/why-is-my-divs-height-zero ) and the referenced [link](http://www.ejeliot.com/blog/59) for an explanation. – StuartLC Nov 16 '12 at 06:16

2 Answers2

1

Once you float an element, it is no longer counted for its parent's height calculations, unless you put in a clearing element:

<div id="container">
    <div id="floated" style="float: left">blah blah blah</div>
    <br style="clear: both" />
</div>

Without that <br> with the clear: both, the #container div will be calculated to be 0-height. With the clearing br, it'll be at least the height of the floated div.

If you don't want to add unecessary markup to your layout, you CAN use overflow: auto on the #container div, which has the same effect, as long as you combine it with a width directive, as per this page.

Marc B
  • 356,200
  • 43
  • 426
  • 500
0

You didn't give height: 100% to the html element

yunzen
  • 32,854
  • 11
  • 73
  • 106