Bootstrap side by side DIV

Question

Would somebody be able to tell me why the divs in this JSFiddle (Bootstrap CSS imported) are not side by side when the string of text in the second div is longer? I appreciate you taking the time to help me.

https://jsfiddle.net/DTcHh/13602/

<div class="container">
    <div class="row">
        <div class='col-md-12'>
          <div style='display:inline-block;border:1px solid purple;'>
            whatever
          </div>
          <div style='display:inline-block;border:1px solid red;'>
          Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
          </div>
        </div>
    </div>
</div>

I realize this does not answer your question directly, but why not col-md-6 both of them and wrap them in another row if needed? That is what bootstrap is useful for after all. — JL Peyret, Oct 24 '15 at 15:45
I want the column on the left to be a fixed number of pixels and the the column on the right to take up the remainder of the screen, so this is not really an option.. Thank you for your reply. — a2f0, Oct 24 '15 at 15:48

score 1 · Accepted Answer · answered Oct 24 '15 at 18:24

Flexbox actually served me proper, thank you for your help.

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
   flex-direction: row;
}

  <div class="container">
        <div class="flexcontainer">
              <div style='width: 50px; border:1px solid purple;'>
                whatever
              </div>
              <div style=' border:1px solid red;'>
              Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
              </div>
            </div>
        </div>
    </div>

score 0 · Answer 2 · edited Jul 05 '18 at 16:09

0

You can set the width for inline-block. https://jsfiddle.net/DTcHh/13604/.

<div style='display:inline-block; width: 20%; border:1px solid purple;'>
whatever
</div>
<div style='display:inline-block; width: 70%;border:1px solid red;'>
Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
</div>

I recommend using the bootstrap grid instead of defining inline-block like the above. For example, <div class="col-md-3> etc. https://getbootstrap.com/examples/grid/

edited Jul 05 '18 at 16:09

kiner_shah

3,939
7
23
37

answered Oct 24 '15 at 15:45

daramao

91
4

This is interesting. I did not realize setting the width like this would work. Thank you for this information. Unfortunately I want the column on the left to be a fixed width, and the column the right to fill the remainder of the width (100% of container). I know I can use jquery to set the width of the second column (or possibly use flexbox), but this just seems a little hacky to me. – a2f0 Oct 24 '15 at 15:50
1

If you want one column to be fixed and the other to be responsive, flexbox would work. http://learnlayout.com/flexbox.html – daramao Oct 24 '15 at 16:00
yeah, I considered that. Mixing flexbox and bootstrap seems like a sub-optimal solution to me, though. I'll give that a try if nobody proposes a better solution. – a2f0 Oct 24 '15 at 16:02

kiner_shah · Answer 3 · 2018-07-05T15:00:34.823

Maybe, it's because of inline-block. Try using just inline:

<div class="container">
    <div class="row">
        <div class='col-md-12'>
          <div style='display:inline;border:1px solid purple;'>
            whatever
          </div>
          <div style='display:inline;border:1px solid red;'>
          Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
          </div>
        </div>
    </div>
</div>

Bootstrap side by side DIV

3 Answers3

Linked