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

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?

Forepeak

Just add box-sizing (CSS3) to each DIV: box-sizing: border-box; – Audit

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>

Awry

Cool, seems work. But why this code doesnt need clear:both after ?? – Forepeak

does not work in IE7, please see my answer withh floats instead :) – Conclude

@Conclude he was very explicit in the question. "How can i do someting like that but without using absolute position and float." +the fluid layout seams to be pretty important there. – Awry

Cute but if those divs have a border or padding it will not work. – Unstrap

@RuiMarques you never heard of box-sizing: border-box do you :D – Awry

Why when I use Bootstrap, can I put second div in new line? – Derivative

@Derivative Why would bootstrap be any different? Its CSS as well, not black magic. – Awry

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

Appal

Answer 3

Wrap them around a div with the following CSS

.div_wrapper{
    white-space: nowrap;
}

Wichern

This makes the child divs appear to the right of the parent div for me. – Ghostwrite

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>

Timecard

For that you can use word-spacing:-1em; OR letter-spacing:-1em; instead of font-size:0; :) – Timecard

The em hack makes the 2 divs combined width < 100%. – Flay

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.

Seato

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>

Euclid

Answer 7

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>

Orff

inline block does not change the problem, its the whitespace, as soon something is inline, every space counts... thats why your trick with the comment is pretty nice, but I'm not sure if this works in IE – Awry

Answer 8

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

Conclude

i personally hate floats and think inline-block is a much cleaner way to go.. no additional markup. And you can make it work in IE to: display:inline; zoom: 1; et voilà – Awry

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/

Unstrap

True, but so is using tables for layout, they are meant for data structure. – Olympias

CSS grid and flexbox replace using tables – Euclid

Yes dude, in my defense this answer is from 2014 and Grid was only available in browsers in 2017, so... ;) – Unstrap

supposedly flexbox was available, though probably no IE support – Euclid

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

Rasla