Cant get these divs to display inline?

Question

I can't seem to figure out how to get these divs to display on the same line. Any help would be greatly appreciated.

.pos-sts {
    display: inline-block;
    background-color: slategray;
    border: 1px solid black;
    text-align: center;
    width: 50%;
 }

<div class="pos-sts">
  <h3>Items in Position/Block</h3>
</div>
<div class="pos-sts">
  <h3>Items Trained During Eval Period</h3>
</div>

Create a parent `div` element and then set CSS property `display:flex;` — Prateek Chaubey, May 31 '21 at 15:51

score -2 · Answer 1 · answered May 31 '21 at 15:52

The <div>'s arn't next to each other because there's no room.

2x 50% is to much to be placed next to each other.

Consider changing the width to eg 49%

.pos-sts {
    display: inline-block;
    background-color: slategray;
    border: 1px solid black;
    text-align: center;
    width: 49%;
 }

<div class="pos-sts">
  <h3>Items in Position/Block</h3>
</div>
<div class="pos-sts">
  <h3>Items Trained During Eval Period</h3>
</div>

Or, use flex so you don't have to worry about the width:

.pos-sts {
    background-color: slategray;
    border: 1px solid black;
    text-align: center;
 }
 
.wrapper {
  display: flex;
  justify-content: space-between;
}

<div class="wrapper">
  <div class="pos-sts">
    <h3>Items in Position/Block</h3>
  </div>
  <div class="pos-sts">
    <h3>Items Trained During Eval Period</h3>
  </div>
 </div>

That 49% trick is great as well! Gives what I'm doing a much more clean and professional look. Thank you! — Mmilest8, May 31 '21 at 15:55
Hello @0stone0 how you get all stackoverflow guidline urls ? — Ankit Tiwari, May 31 '21 at 16:04
@AnkitTiwari You can find most of those presets [on this markdown faq page](https://stackoverflow.com/editing-help#comment-formatting). — 0stone0, May 31 '21 at 16:05

score -2 · Answer 2 · edited Jun 01 '21 at 08:23

-2

I used display:inline; and float:left and it worked just how I needed it to!

edited Jun 01 '21 at 08:23

Wai Ha Lee

8,598
83
57
92

answered May 31 '21 at 15:52

Mmilest8

15
3

The other answer doesn't suggest `float:left`. Accepting it instead of posting what works seems... counterintuitive here. – Wai Ha Lee Jun 01 '21 at 08:24

Cant get these divs to display inline?

2 Answers2