Two inline-block, width 50% elements wrap to second line

Question

I would like to have two columns of 50% width space, and avoid floats. So i thought using display:inline-block.

When the elements add to 99% width (eg 50%, 49%, http://jsfiddle.net/XCDsu/2/ ) it works as expected.

When using 100% width (eg 50%, 50%, http://jsfiddle.net/XCDsu/3/ ) the second column breaks to the second line.

Why is that?

This question should be reopened since it is not a duplicate of the question about whitespace. This question seems more related to how to avoid the wrapping of the second 50% width element. — Ganymede, Dec 21 '17 at 16:27
I guess this question is locked now so I can't add another answer. The easiest solution is to set `font-size: 0` on the inline-block elements, and then give the content of those elements a font size, e.g. `font-size: 16px`. This will remove the whitespace between them. — Gavin, Nov 24 '18 at 13:17

score 319 · Accepted Answer · answered Jul 29 '11 at 10:53

319

It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. Live Example: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

answered Jul 29 '11 at 10:53

tw16

29,215
7
63
64

1

It still won't work in IE7, though. Any ideas how to fix it there? Currently I make the elements of a fixed height (they are two buttons) and position them absolute with the left one having `right: 50%` and the right one having `left: 50%`. Not very elegant but works in every browser. :/ – panzi Jun 06 '12 at 21:23
1

@panzi My suggestion below will solve your IE7 woes, and wont require you to remove whitespace from your HTML, which is a pain, and hard to eradicate from dynamic situations without a post-processor which costs more CPU-time for marginal bandwidth savings. – Phil Ricketts Jul 24 '12 at 17:35
@Replete It's generated in JavaScript, so it's easy to prevent the white spaces. However, the layout changed so that I don't have such columns anyway. – panzi Jul 26 '12 at 14:33
9

sounds so stupid when you read it... and it does the trick ! amazing this still behaves like this after css3, because it sounds to me like a bug – Cynthia Sanchez Mar 29 '16 at 18:21

score 123 · Answer 2 · answered May 14 '12 at 23:20

123

You can remove the whitespaces via css using white-space so you can keep your pretty HTML layout. Don't forget to set the white-space back to normal again if you want your text to wrap inside the columns.

Tested in IE9, Chrome 18, FF 12

.container { white-space: nowrap; }
.column { display: inline-block; width: 50%; white-space: normal; }

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

answered May 14 '12 at 23:20

Adam

2,082
2
19
17

13

Using no-wrap makes the columns sit next to each other, but creates an undesirable padding, breaking out of the container. **My suggestion below does not have this issue**, here's a live example: http://jsbin.com/openuh/2 – Phil Ricketts Jul 24 '12 at 17:10
@Replete is it just me or does not appear to work with font-sizes defined in em's? – Pete Mar 26 '14 at 12:03
This solution is even better to have a cleaner HTML in dev mode at least :D – Cynthia Sanchez Mar 29 '16 at 18:23
@PhilRicketts does this method not allow you to set a fixed height on the container? I tried and it does not work nor with the children. – Jarg7 Jun 22 '16 at 07:04
nowrap seemed good, but it breaks in for some cases (not sure why, two 50% divs in a table cell, with nowrap, the 2nd div is displayed outside the cell). With just removing the space between divs (as per tw16's answer), it works... – Eino Gourdin Feb 14 '17 at 15:20
This works perfectly! – catandmouse Jun 02 '18 at 12:57

score 36 · Answer 3 · edited May 25 '19 at 02:29

NOTE: In 2016, you can probably use flexbox to solve this problem easier.

This method works correctly IE7+ and all major browsers, it's been tried and tested in a number of complex viewport-based web applications.

<style>
    .container {
        font-size: 0;
    }

    .ie7 .column {
        font-size: 16px; 
        display: inline; 
        zoom: 1;
    }

    .ie8 .column {
        font-size:16px;
    }

    .ie9_and_newer .column { 
        display: inline-block; 
        width: 50%; 
        font-size: 1rem;
    }
</style>

<div class="container">
    <div class="column">text that can wrap</div>
    <div class="column">text that can wrap</div>
</div>

Live demo: http://output.jsbin.com/sekeco/2

The only downside to this method for IE7/8, is relying on body {font-size:??px} as basis for em/%-based font-sizing.

IE7/IE8 specific CSS could be served using IE's Conditional comments

This method is more practical since you can't always control the markup, especially if it is generated. Great solution! — Sirius_B, Aug 05 '14 at 20:53
This approach doesn't scale if markup changes to have 3 divs. inline-block keeps rows of 2 50% div and flex arranges all of them in a row, making them smaller. I however agree that this isn't the scenario in the OP's asked question. — Priya Ranjan Singh, Apr 10 '17 at 16:01

score 14 · Answer 4 · edited May 23 '17 at 11:47

14

inline and inline-block elements are affected by whitespace in the HTML.

The simplest way to fix your problem is to remove the whitespace between </div> and <div id="col2">, see: http://jsfiddle.net/XCDsu/15/

There are other possible solutions, see: bikeshedding CSS3 property alternative?

edited May 23 '17 at 11:47

Community

1
1

answered Jul 29 '11 at 10:53

thirtydot

224,678
48
389
349

score -2 · Answer 5 · answered Dec 03 '13 at 10:05

I continued to have this problem in ie7 when the browser was at certain widths. Turns out older browsers round the pixel value up if the percentage result isn't a whole number. To solve this you can try setting

overflow: hidden;

on the last element (or all of them).

Two inline-block, width 50% elements wrap to second line

5 Answers5

Linked

Related