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
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>