How to place divs one next to another without floatant?

Question

I managed to place two divs one next to the other using float: left, but the div below doesn't display properly : http://jsfiddle.net/N4kE3/2/

And with this css for each div :

display: inline-block;
width: 50%;

see: http://jsfiddle.net/N4kE3/3/

They are one above the other. I have to put width: 49% to make them be one next to the other.

How is that possible ?

possible duplicate of [How do I remove the visibility of spaces between inline elements?](http://stackoverflow.com/questions/4722222/how-do-i-remove-the-visibility-of-spaces-between-inline-elements) — Paulie_D, Apr 13 '14 at 13:29
If you have any padding, border applied to it then width is not that which you think. — Jai, Apr 13 '14 at 13:30

Turnip · Accepted Answer · 2014-04-13T13:35:23.657

If you wish to keep your floats you could use a clearfix on the container:

Working demo

#action:after {
    content: "";
    display: table;
    clear: both;
}

If you wish to useinline-block you need to remove the white space in your markup:

Working demo

This..

    <div id="action">
        <div id="buy" class="action">Buy</div>
        <div id="sell" class="action">Sell</div>
    </div>

Becomes...

<div id="action">
    <div id="buy" class="action">Buy</div><div id="sell" class="action">Sell</div>
</div>

.. otherwise the white space will be taken into account when calculating the widths making 50% + 50% + whitespace = more than 100%. Thats just how inline-block works.

score 1 · Answer 2 · answered Apr 13 '14 at 13:35

The space between elements is displayed. Imagine <strong>Hello</strong> <em>world</em>. This is displayed as "Hello world". See the space between Hello and World.

An enter and multiple spaces are collapsed to a single space.

  <strong>Hello</strong>
  <em>world</em>

becomes "Hello world".

The same is happening with your divs. They are both 50% of the screen, but the space also takes up 10 pixels, pushing the 2nd div to the next line.

There are several ways of solving this. Using float, using display: table-cell or (as I usually prefer) by eliminating the space between the divs using XML comments .

<div id="content">
    <div id="action">
        <div id="buy" class="action">Buy</div><!--
     --><div id="sell" class="action">Sell</div>
    </div>
    <div id="other">test</div>
</div>

See the fiddle

Can't we use `` in this case ? – Elfayer Apr 15 '14 at 07:40 — Elfayer, Apr 15 '14 at 07:40

How to place divs one next to another without floatant?

2 Answers2

See the fiddle