CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

Why does inline-block which equal 100% not fit on one line

This is my code: http://jsfiddle.net/3GPTy/4/

CSS:

.price {
    display: inline-block;
    width: 19%;
    background-color: pink;
    margin-right: 8%;
}
.last {
    margin-right: 0%
}

 .container {
    width: 780px;
    margin:0px auto;
}
* {
    margin: 0px;
    padding: 0px;
}

What I don't understand is, I have 4*19 + 3*8 which should equal 100% but still it doesn't fit on one line?

Upvotes: 0

Views: 199

Answers (3)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

To elaborate further, here's a few ways of solving the problem:

  • Comment out the space

    </div><!--
--><div>

  • Put the space in the tags

    </div
><div>

  • Just shove it on one line

    </div><div>

The last one especially, ideally you should be minifying your HTML - I do on-the-fly with PHP magic, and with that I can write readable HTML and not have spaces.

Upvotes: 5

agconti
agconti

Reputation: 18093

Its because of the how the browser treats fonts; between letters it puts a small sliver of whitespace to space the characters out correctly. Counterintuitively this idea is applied to all elements, so if you have two div's at 50% width they will not fit on the same line because the small white space added makes the total width greater than 100%.

To solve this add:

font-size: 0;

to the parent div. You can then set the desired font size in its children to remove the white spacing that would have otherwise been added

Here's more detail on the issue from this CSS Tricks article, as well as other soultions including floating the elements and using comments.

Upvotes: 0

midstack
midstack

Reputation: 2123

CSS

.price {
   width: 19%;
   background-color: pink;
   margin-right: 8%;
   float:left;
}

http://jsfiddle.net/3GPTy/10/

Upvotes: 3

Related Questions