CODEWITHSUNDEEP
csshtml
Darryl Chapman
Darryl Chapman

Reputation: 399

HTML fitting divs in divs

I am very simply trying to have 5 Divs inline, inside a div. I am doing this by simply creating a div, and inside that div having 5 divs with the widths of 20% each, all using inline-block.

However, all im getting is 4 of my divs in the parent div and the 5th overflowing onto the next line.

How could this be happening? 5 x 20 = 100%, so why does it seem to equal more?

enter image description here

enter image description here

http://pastebin.com/uS6vcwTM HTML code

http://pastebin.com/VKHS7swJ CSS code

Upvotes: 0

Views: 67

Answers (2)

j08691
j08691

Reputation: 207891

Inline elements are sensitive to white space. You can remove the white space between the divs like:

<div id="Navigation">
    <div class="NavButton">Button</div><div class="NavButton">Button</div><div class="NavButton">Button</div><div class="NavButton">Button</div><div class="NavButton">Button</div>
</div>

jsFiddle example

Or add float:left to the NavButton class.

jsFiddle example

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 114990

Inline-block takes account of whitespace in your HTML.

This usually equates to .0.25em or 4px depending on your browsers basic font-size.

There are a couple of techniques to solve this.

The first and perhaps simplest involves setting the font size of the parent to 0. The font size would then need to be reset in the children...the boxes

JSFiddle Demo

Upvotes: 2

Related Questions