divide div with percentage

Question

Simple question I want to divide a div in to two columns I am using to divs with http://jsfiddle.net/petran/WnKW3/

display:inline-block

and it works fine , when I add widths with sum of 100% the second column appears underneath seems that it doesn't feet on the parent window, if the widths sums up to 99% is working my question is if that should always be the sum of columns ?

Answer 1

That is because of the gap between the two child div elements in HTML code. you need to remove the gap between the two div's to which you are giving display: inline-block. Just remove it. It will work fine.

<div class="container">
    <div class="col1">
        col1
    </div><div class="col2">  <!-- removed whitespace -->
        col2
    </div>
</div>

Working Fiddle

For more information go through this link

There are many other ways to fix this. which you can find here

Answer 2

The white space between your divs take up space so your total width is greater than 100% thats why it wraps. Remove the space and you'll see

<div class="col1">
    col1
</div><div class="col2">
    col2
</div>

http://jsfiddle.net/WnKW3/1/