Displaying 2 divs, side-by-side, equally filling available width

Question

I'd like to display 2 divs, side-by-side, equally filling available width. The problem is that when I set each to 50%, they end up stacking vertically. Setting one of them to 49% fixes it, but that feels like a kluge. Is there a better way to do this?

#red {
    display:inline-block;
    background-color:red;
    width:50%;
}

#green {
    display:inline-block;
    background-color:green;
    width:50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="panel panel-default sc-panel">
        <div class="panel-heading">My Panel</div>
        <div class="panel-body" style="padding:0">
                <div id="red">red</div>
                <div id="green">green</div>
        </div>
    </div

-- EDIT --

yes, it's a duplicate question. Just my opinion, but I didn't like previous answers: (1) setting font-size to zero, (2) putting the html code on same line, potentially making it less readable

Bootstrap? Isn't bootstrap already covered with examples that achieve what you need? — Roko C. Buljan, Apr 04 '17 at 15:22
An alternative to putting divs on the same line is simply commenting out the whitespace with an empty HTML comment starting immediately after the first div ends and ending immediately before the second div begins: `
blah
blah2
` — TylerH, Apr 04 '17 at 15:46
@AakashThakur We can't make guesses about any constraints OP may or may not have. That's OP's responsibility to mention. At any rate, adding a blank comment is hardly 'tampering with' the HTML. — TylerH, Apr 04 '17 at 15:51

score 2 · Answer 1 · answered Apr 04 '17 at 15:22

2

Inline elements are sensitive to white space in your code, so just remove it:

#red {
  display: inline-block;
  background-color: red;
  width: 50%;
}

#green {
  display: inline-block;
  background-color: green;
  width: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="panel panel-default sc-panel">
  <div class="panel-heading">My Panel</div>
  <div class="panel-body" style="padding:0">
    <div id="red">red</div><div id="green">green</div>
  </div>
  </div

answered Apr 04 '17 at 15:22

j08691

204,283
31
260
272

Why would they be "sensitive"? (I can see they "are") but what on earth is that all about? – mayersdesign Apr 04 '17 at 15:23
1

Downvoter care to comment? – j08691 Apr 04 '17 at 15:24
@mayersdesign the word means they respond to external stimuli. AKA external factors, like white space, affect them. – TylerH Apr 04 '17 at 15:24
@mayersdesign By sensitive I mean the browser takes the white space into consideration when rendering inline elements – j08691 Apr 04 '17 at 15:24
Wow, misunderstand much haha. I know exactly what the word means haha, I am asking - given that I can see this phenomenon, WHY it actually happens. I think we all agree that is shouldn't happen right? Whitespace between code should be "invisible" to the browser right? – mayersdesign Apr 04 '17 at 15:26
1

@mayersdesign - no, not with inline elements. Spacing around inline elements is treated like the space around text. Are the spaces around text removed or invisible? – j08691 Apr 04 '17 at 15:28
Oh OK. So it's not a browser quirk. I had thought that anything outside of >< would be "off-limits" to the rendering engine! that's very surprising to me. It's really by design? How interesting – mayersdesign Apr 04 '17 at 15:32
@mayersdesign no otherwise "Hello World" would be interpreted like `HelloWorld` - or using **inline elements** like `b`, `i` etc... `Hi there!` would result in **Hi**there! . Inacceptable. Have you seen the hint? Imagine a lined sheet of paper. The paper is your **block** element, and the lines inside it is the line-height where `inline` elements are placed, ...and text, spaces, images etc... everything that is inline. – Roko C. Buljan Apr 04 '17 at 15:34
1

Seriously, two downvotes? I'm curious about what's wrong or not helpful here. – j08691 Apr 04 '17 at 15:35
@j08691 I'm afraid that's probably my fault. Though I didn't downvote your answer, I did post this question in the [SOCVR](http://chat.stackoverflow.com/transcript/message/36467750#36467750) room as a duplicate close-vote request. Some discussion ensued because another user thought it was against the site rules to answer a question and then close it as a duplicate (it's not). However, other users saw the discussion and link to here and may have felt strongly about it regardless. – TylerH Apr 04 '17 at 15:42
@j08691 Note, a room owner *just* ran a script that moves completed CV requests to a 'graveyard'. Here is the contextual start from the actual SOCVR room: http://chat.stackoverflow.com/transcript/message/36467764#36467764 – TylerH Apr 04 '17 at 15:43
1

@TylerH - Just reading the thread you posted. I never use the chat and had no idea so much discussion went into the close voting. Interesting. I'm all for this type of discussion, however if users are just blindly also downvoting answers without actually seeing if they had value I find that problematic. – j08691 Apr 04 '17 at 15:48
@j08691 I agree. And usually people do not discuss this much about a question posted in that room, it just happens sometimes when a user is confused about something regarding it. – TylerH Apr 04 '17 at 15:52
Down votes keep coming. Didn't expect this kind of response. I'll delete this post shortly. – Skyler Apr 04 '17 at 16:06

score 0 · Answer 2 · answered Apr 04 '17 at 15:23

Floating the first div cures this, although honestly, I am not that sure why! I can't see any reason - other than browser quirks - why your code should not work as it is.

#red {
    display:inline-block;
    background-color:red;
    width:50%;
    float: left;
}

#green {
    display:inline-block;
    background-color:green;
    width:50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="panel panel-default sc-panel">
        <div class="panel-heading">My Panel</div>
        <div class="panel-body" style="padding:0">
                <div id="red">red</div>
                <div id="green">green</div>
        </div>
    </div

This will cause the red div to overlap the green div by 1% (or nearly 1%) of the green div's width. Not really noticeable in this example, but in practice it could cause an unsightly experience for the visitor. — TylerH, Apr 04 '17 at 15:48

Displaying 2 divs, side-by-side, equally filling available width

2 Answers2