CSS two div width 50% in one line with line break in file
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>
Wrap them around a div with the following CSS
.div_wrapper{
white-space: nowrap;
}
The problem is that if you have a new line between them in the HTML, then you get a space between them when you use inline-table
or inline-block
50% + 50% + that space > 100% and that's why the second one ends up below the first one
Solutions:
<div></div><div></div>
or
<div>
</div><div>
</div>
or
<div></div><!--
--><div></div>
The idea is not to have any kind of space between the first closing div tag and the second opening div tag in your HTML.
PS - I would also use inline-block
instead of inline-table
for this