CSS: Percentage height computed as zero. Why?

Question

I have the following markup:

<body>
    <div class="slide">
        <header>
            <p id="progress">3/20
            </p>
            <!-- hfill -->
            <p id="timer">20:00
            </p>
        </header>
        <div class="question">
            <p id="question">What is 2+2?
            </p>

...and CSS:

img {
    display: block;
}        

.slide {
    border: 3px solid black;
    margin: 5% 10%;
    width: 80%;
    height: 100%;
}

header {
    margin: 0;
    height: 10%;
}

header p {
    margin: 0;
    font-size: 300%;
}        

#progress {
    float: left;
}

#timer {
    float: right;
}

When I use Google's dev-tools, div.slide has dimensions 1074 x 208 px and header has 1068 x 0 px. Why is the header's height computed as zero? I'd like it to be 10% of its parent.

It would help to have a live demo on something like jsbin.com Here ya go http://jsbin.com/ifAfOCU/1/edit — m59, Dec 21 '13 at 21:43
possible duplicate of [Height of parent div is zero even if it has child with finite heights](http://stackoverflow.com/questions/12540436/height-of-parent-div-is-zero-even-if-it-has-child-with-finite-heights) — m59, Dec 21 '13 at 21:52

score 2 · Answer 1 · answered Dec 21 '13 at 21:50

2

You need to clear your floats. By floating both elements inside header, it collapses into itself.

Add the following, which is the standard clearfix:

header:after {
    display: table;
    clear: both;
    content: '';
}

Demo

answered Dec 21 '13 at 21:50

brouxhaha

4,003
1
19
22

score 0 · Answer 2 · answered Dec 21 '13 at 21:50

0

Since your child elements all is set to floating, the element is rendered as "empty".

answered Dec 21 '13 at 21:50

Softwarehuset

815
4
10

score 0 · Accepted Answer · answered Dec 21 '13 at 21:51

0

Because when you float header's content elements they're removed from the flow of the document and header collapses because it essentially has no content.

Add overflow:auto to your header's CSS rules and you'll get a height restored.

jsFiddle example

answered Dec 21 '13 at 21:51

j08691

204,283
31
260
272

score 0 · Answer 4 · edited May 23 '17 at 10:25

0

Its not a good idea to use height in percentages. Try reading Percentage Height HTML 5/CSS and Height in percent when parent has min-height and no height

To use the height in percentages,

You need to have a height of the parent element.
If you see your slide div, it is just beneath the body. So It did not work.
Body does not have any height, so your height is computed to zero.

edited May 23 '17 at 10:25

Community

1
1

answered Dec 21 '13 at 21:53

Rajesh

1,459
10
17

score 0 · Answer 5 · answered Dec 21 '13 at 21:53

This is float collapse. If floated elements have non-floated parent elements, the parent will collapse and will appear to have height = 0.

You can use 3 solutions to solve that problem:

Float the parent.
Set height to the parent (eg 100px)
Set parent overflow:auto

CSS: Percentage height computed as zero. Why?

5 Answers5