inline - CSS two div width 50% in one line with line break in file

Question

I try to build fluid layout using percentages as widths. Do do so i tried this:

<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>

In that case they wont stand in one line, but if i remove line break between them, like this:

    <div style="width:50%; display:inline-table;">A</div><div style="width:50%;   display:inline-table;">B</div>

then it works fine. Where is the problem? How can i do someting like that but without using absolute position and float.

p.s. sorry for english. p.s.s. i hope i good explain my problem

Answer 1

The problem is that when something is inline, every whitespace is treated as an actual space. So it will influence the width of the elements. I recommend using float or display: inline-block. (Just don't leave any whitespace between the divs).

Here is a demo:

div {
  background: red;
}
div + div {
  background: green;
}

<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>