CSS two divs width 50% in one line with line break in file [duplicate] - css

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
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>

Answer 2

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

Answer 3

Wrap them around a div with the following CSS
.div_wrapper{
white-space: nowrap;
}

Answer 4

Give this parent DIV font-size:0. Write like this:
<div style="font-size:0">
<div style="width:50%; display:inline-table;font-size:15px">A</div>
<div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>

Answer 5

How can i do something like that but without using absolute position
and float?
Apart from using the inline-block approach (as mentioned in other answers) here are some other approaches:
1) CSS tables (FIDDLE)
.container {
display: table;
width: 100%;
}
.container div {
display: table-cell;
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
2) Flexbox (FIDDLE)
.container {
display: flex;
}
.container div {
flex: 1;
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
For a reference, this CSS-tricks post seems to sum up the various approaches to acheive this.

Answer 6

CSS Flexboxes
Simple modern solution. Better than HTML tables!
.container {
display: flex;
}
.container div {
flex: auto; /* also 1 or 50% */
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
Alternative: CSS Grids
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* also 50% */
}
<div class="container">
<div>A</div>
<div>B</div>
</div>

Answer 7

<div id="wrapper" style="width: 400px">
<div id="left" style="float: left; width: 200px;">Left</div>
<div id="right" style="float: right; width: 200px;">Left</div>
<div style="clear: both;"></div>
</div>
I know this question wanted inline block, but try to view http://jsfiddle.net/N9mzE/1/ in IE 7 (the oldest browser supported where I work). The divs are not side by side.
OP said he did not want to use floats because he did not like them. Well...in my opinion, making good webpages that does not look weird in any browsers should be the maingoal, and you do this by using floats.
Honestly, I can see the problem. Floats are fantastic.

Answer 8

basically inline-table is for element table, I guess what you really need here is inline-block, if you have to use inline-table anyway, try it this way:
<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>

Answer 9

Sorry but all the answers I see here are either hacky or fail if you sneeze a little harder.
If you use a table you can (if you wish) add a space between the divs, set borders, padding...
<table width="100%" cellspacing="0">
<tr>
<td style="width:50%;">A</td>
<td style="width:50%;">B</td>
</tr>
</table>
Check a more complete example here: http://jsfiddle.net/qPduw/5/

Answer 10

The problem you run into when setting width to 50% is the rounding of subpixels. If the width of your container is i.e. 99 pixels, a width of 50% can result in 2 containers of 50 pixels each.
Using float is probably easiest, and not such a bad idea. See this question for more details on how to fix the problem then.
If you don't want to use float, try using a width of 49%. This will work cross-browser as far as I know, but is not pixel-perfect..
html:
<div id="a">A</div>
<div id="b">B</div>
css:
#a, #b {
width: 49%;
display: inline-block;
}
#a {background-color: red;}
#b {background-color: blue;}