Question

I want to build a fluid layout using percentages for widths. Here is my HTML:

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

The problem is that the elements won’t display together on one line. However, the layout works fine if I remove the line break between the them in the HTML:

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

What is the problem with the first HTML, above? How can I do something like that, but without using absolute position and float?

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>