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 ?

score 3 · Accepted Answer · edited May 23 '17 at 10:25

3

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

edited May 23 '17 at 10:25

Community

1
1

answered Jun 19 '13 at 16:15

Mr_Green

40,727
45
159
271

But isn't it a better idea to float the DIVs, so you don't depend on whitespace from the markup? – nice ass Jun 19 '13 at 16:17
@OneTrickPony ya that is other way around. but we don't know what OP exactly doing. as we can see just excerpt code from OP's project. – Mr_Green Jun 19 '13 at 16:18
This is weird. How can a whitespace affect displaying of html elements.(Ofcourse, without a pre tag) ? – Vivek Sadh Jun 19 '13 at 16:24
@Vivek , because inline-boxes behaves like words/letters .@One Trick Pony, floatting has sides effect and won't vertical-align those two if needed. – G-Cyrillus Jun 19 '13 at 16:28
@GCyrillus ya you are right about the `vertical-align` which can be fixed by `vertcal-align: top`. (I know you know this, just informing to OneTrickPony) – Mr_Green Jun 19 '13 at 16:29

score 2 · Answer 2 · answered Jun 19 '13 at 16:15

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/

answered Jun 19 '13 at 16:15

Musa

96,336
17
118
137

divide div with percentage

2 Answers2