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

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?

Just add box-sizing (CSS3) to each DIV: box-sizing: border-box; — Zaur_M, Aug 07 '15 at 09:41

score 86 · Accepted Answer · edited Sep 18 '19 at 13:48

86

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>

edited Sep 18 '19 at 13:48

mfluehr

2,832
2
23
31

answered May 22 '12 at 08:55

meo

30,872
17
87
123

Cool, seems work. But why this code doesnt need clear:both after ?? – Chris May 22 '12 at 09:02
does not work in IE7, please see my answer withh floats instead :) – OptimusCrime May 22 '12 at 09:13
@OptimusCrime 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. – meo May 22 '12 at 09:28
Cute but if those divs have a border or padding it will not work. – Rui Marques Jan 02 '14 at 12:14
3

@RuiMarques you never heard of `box-sizing: border-box` do you :D – meo Mar 26 '14 at 09:25
Why when I use Bootstrap, can I put second div in new line? – Lai32290 Apr 17 '16 at 02:29
@Lai32290 Why would bootstrap be any different? Its CSS as well, not black magic. – meo Jun 04 '16 at 06:54

Ana · Answer 2 · 2012-05-22T09:12:27.073

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

score 29 · Answer 3 · answered Mar 19 '15 at 09:02

29

Wrap them around a div with the following CSS

.div_wrapper{
    white-space: nowrap;
}

answered Mar 19 '15 at 09:02

Tihomir Mitkov

846
1
11
20

This makes the child divs appear to the right of the parent div for me. – martin36 Jun 09 '18 at 14:41

score 22 · Answer 4 · answered May 22 '12 at 09:13

22

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>

answered May 22 '12 at 09:13

sandeep

91,313
23
137
155

1

For that you can use word-spacing:-1em; OR letter-spacing:-1em; instead of font-size:0; :) – sandeep May 22 '12 at 09:36
The em hack makes the 2 divs combined width < 100%. – Ashley Sep 25 '14 at 15:07

score 19 · Answer 5 · answered Mar 19 '15 at 10:15

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.

qwr · Answer 6 · 2021-08-19T03:11:48.907

4

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>

edited Aug 19 '21 at 03:11

answered Aug 04 '21 at 09:45

qwr

9,525
5
58
102

score 1 · Answer 7 · answered May 22 '12 at 09:13

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

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à — meo, May 22 '12 at 09:33

score 0 · Answer 8 · answered May 22 '12 at 08:59

0

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>

answered May 22 '12 at 08:59

S.831

113
1
10

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 – meo May 22 '12 at 09:05

score 0 · Answer 9 · answered Jan 02 '14 at 12:37

0

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/

answered Jan 02 '14 at 12:37

Rui Marques

8,567
3
60
91

True, but so is using tables for layout, they are meant for data structure. – CodingInTheUK Oct 15 '17 at 08:21
CSS grid and flexbox replace using tables – qwr Aug 04 '21 at 09:46
Yes dude, in my defense this answer is from 2014 and Grid was only available in browsers in 2017, so... ;) – Rui Marques Aug 04 '21 at 10:41
supposedly flexbox was available, though probably no IE support – qwr Aug 04 '21 at 19:28

score -1 · Answer 10 · edited May 23 '17 at 12:18

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

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

10 Answers10

1) CSS tables (FIDDLE)

2) Flexbox (FIDDLE)

CSS Flexboxes

Alternative: CSS Grids

Linked