Basic CSS Positioning (fitting Children In Container)

Very basic CSS question. Given the code shown in http://jsfiddle.net/danwoods/65X7X/ why don't the child divs (the colored blocks) fit into the container element? CSS from fiddle .

Solution 1:

Because inline elements are sensitive to white space. You can remove them so the HTML looks like:

<div class="container">
    <div class="one"></div><div class="two"></div><div class="three"></div>
</div>

jsFiddle example

Or float the divs left:

.one,.two,.three {
    float:left;
}

jsFiddle example

Or use HTML comments to eat up the white space:

<div class="container">
    <div class="one"></div><!--
    --><div class="two"></div><!--
    --><div class="three"></div>
</div>

jsFiddle example

Solution 2:

You have to float them left:

http://jsfiddle.net/65X7X/2/

.container div {
    width: 120px;
    height: 100%;
    display: inline-block;
    float: left;
}

Hope this helps.

Solution 3:

Its not a bug. You can see here why it happens and how you can overcome the problem.

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Solution 4:

While putting literally no spaces between the divs in your code, or using HTML comments both work equally well, there is a better solution. In my opinion, the most elegant solution, by which I mean the way which does not involve having to mess up the look and readability of your code, is to add this line of CSS:

body>.container{font-size:0;}

If your body tag is not the parent of .container, replace body with whatever the parent is. This line basically says that the styles will apply to the .container class, but only that specific class. Not the child elements of .container. So by applying a font size of 0, you eliminate the gaps made by it, thereby bringing everything into alignment.

http://jsfiddle.net/65X7X/6/