Question

I have a parent container, that has child containers within it. 2 child containers take up 60% width and 40% width respectively. They have no margin, and they have padding, but use box-sizing so this is included in the width. But for some reason they don’t sit side by side. If I change one of them to 39% width then it looks fine.

What am I doing wrong?

Example can be seen at http://jsfiddle.net/Rcaet/

Answer 1

You are using display:inline-block which by default have some space. For this you have to use a font-size:0 hack. Write like this:

.parent-container {
    font-size:0;
}
.parent-container > div{
    font-size:16px;
}

Check this http://jsfiddle.net/Rcaet/8/