CODEWITHSUNDEEP
css
Sir
Sir

Reputation: 8280

Div % width does not seem accurate

I have some child divs (5 of them) set to a width of 20%.

They have no padding/margin or border yet they still wrap to a new line in the parent div. Here is an example:

<div id="parent">
    <div id="child">Test</div>
    <div id="child">Test</div>
    <div id="child">Test</div>
    <div id="child">Test</div>
    <div id="child">Test</div>
</div>

The output shows:

Test       Test       Test       Test
Test

My CSS:

* { 
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
 }

#parent{

width:500px;
color:white;
background-color:black;    

}

#child{
    width:20%;
    display: inline-block;
    vertical-align:top;
    text-align:center;
}

Shouldn't width:20%; work with 5 child divs, why do they wrap to a new line??

Here is fiddle of it in action: http://jsfiddle.net/aeG9q/2/

Upvotes: 1

Views: 45

Answers (2)

C. S.
C. S.

Reputation: 813

You can also remove the whitespace like in this fiddle

<div id="parent"><!--
    --><div class="child">Test</div><!--
    --><div class="child">Test</div><!--
    --><div class="child">Test</div><!--
    --><div class="child">Test</div><!--
    --><div class="child">Test</div>
</div>

Upvotes: 3

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

The culprit is display:inline-block. Because of it, your divs start acting like real inline content, just like text and links. Because of this, the whitespace between the divs (they're all on a new line in the source), is actually rendered, and in a normal font takes up a handful of pixels, thus pushing the total width of the 5 divs over the size of the parent.

To solve, either apply font-size:0 to the parent (which causes some other problems) or use floating instead of display:inline-block.

Upvotes: 6

Related Questions