display: inline-block not working. How do I make it work?

Question

I've searched for other solutions here in stackoverflow but found no luck unfortunately. If there is an answer that already exist to my question then I apologize, and please link the answer to me :)

Anyway I have to divs but display: inline-block; is not working. I want them to be right next to each other WITHOUT using float. How do I achieve this? I must be missing something here..

here's the jsfiddle - https://jsfiddle.net/frxme8z8/

Thanks in advance folks!

.context {
  box-sizing: border-box;
  width: 50%;
  padding: 10px;
  background: #72ED80;
  font-family: 'Source Sans Pro', sans-serif;
  display: inline-block;
  height: 200px
}

You have the width at 50% _and_ 10px padding. You need to reduce the width. — Jon, Oct 29 '15 at 11:42
@Thaillie, he mentioned in the question that he doesn't want to use `float`. — Jon, Oct 29 '15 at 11:44
But then i thought padding:10px wouldnt affect anything since I set the divs to box-sizing:border-box;. What went wrong? — billybobjones, Oct 29 '15 at 11:45
@billybobjones, maybe this can help [LINK](http://stackoverflow.com/a/32801275/4050842) — Thaillie, Oct 29 '15 at 11:50

imGaurav · Answer 1 · 2015-10-29T11:59:52.160

2

just set your .context width to 49 %

.context {
  box-sizing: border-box;
  width: 49%;
  padding: 10px;
  background: #72ED80;
  font-family: 'Source Sans Pro', sans-serif;
  display: inline-block;
  height: 800px
}

<div class="context"></div>
<div class="context"></div>

edited Oct 29 '15 at 11:59

answered Oct 29 '15 at 11:43

imGaurav

1,043
7
14

Bennet G. · Answer 2 · 2015-10-29T12:01:48.077

The answer from @imGaurav is correct. Because you've set the size to 50% there is nomore space for the gap between ;)

So just set the width to 49% and everything will work :)

.context {
  box-sizing: border-box;
  width: 49%;
  padding: 10px;
  background: #72ED80;
  font-family: 'Source Sans Pro', sans-serif;
  display: inline-block;
  height: 800px
}

Otherwise you can change you're padding to 0px but then, you don't have a gap between it anymore ;)

score 0 · Answer 3 · answered Oct 29 '15 at 12:04

0

your problem is the whitespaces. I see u did it with 50% - 10px...the correct way is 50% - 8px actually...OR if u want a cleaner version, just remove the whitespace in your html file like in this fiddle i made https://jsfiddle.net/r9LrLva1/

answered Oct 29 '15 at 12:04

Gho

570
2
9

display: inline-block not working. How do I make it work?

3 Answers3