'display:inline' not bringing two divs in a line

Question

I am trying to bring two divs in one line horizontally. On some basic search, display:inline should be able to do it. But see the below code:

<div style="display:inline; ">
    <div  style="line-height:0pt; border:1px solid red" align="left" >
        <span style="white-space:pre-wrap; font:Bold 10pt Helvetica; color:rgb(0,0,0);">STATE EMPLOYEES' PPO PLAN</span>
    </div> 
</div> 
<div style="display:inline ">
    <div  style="line-height:0pt;border:1px solid red" align="left" >
        <span style="white-space:pre-wrap;  font:normal 9pt Helvetica; color:rgb(0,0,0);">Administrative Services Provided by:</span>
    </div> 
</div>

It's keeping divs in two separate lines, whereas display:inline-block gives the desired behavior:

<div style="display:inline-block; ">
    <div  style="line-height:0pt; border:1px solid red" align="left" >
        <span style="white-space:pre-wrap; font:Bold 10pt Helvetica; color:rgb(0,0,0);">STATE EMPLOYEES' PPO PLAN</span>
    </div> 
</div> 
<div style="display:inline-block">
    <div  style="line-height:0pt;border:1px solid red" align="left" >
        <span style="white-space:pre-wrap;  font:normal 9pt Helvetica; color:rgb(0,0,0);">Administrative Services Provided by:</span>
    </div> 
</div>

But the problem i am having with display:inline-block is that it gives too much padding, so when i expect two lines to come closer together, they come at a lot of gap in between which is not acceptable.. display:inline seems the way to go but it just isn't working. Kindly explain this behavior and what can be done to make it right..

With `display:inline` situation would be the same. The reason why this gap happens is common for inline/inline-block elements. — dfsq, Feb 16 '15 at 12:56
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Paulie_D, Feb 16 '15 at 12:56
how to remove the paddings and give the same behavior which inline would give... and also, why isn't inline bringing them in one line? — Abdul Jabbar, Feb 16 '15 at 12:58
Have you tried setting the margin-top and margin-bottom of the inline-block divs? — radiaph, Feb 16 '15 at 13:00

score 0 · Answer 1 · answered Feb 16 '15 at 12:58

You should add display: inline to both container and inner divs to reset default <div> display property that is block.

div {
  display: inline;
}

<div>
  <div style="line-height:0pt; border:1px solid red;" align="left">
    <span style="white-space:pre-wrap; font:Bold 10pt Helvetica; color:rgb(0,0,0);">STATE EMPLOYEES' PPO PLAN</span>
  </div>
</div>
<div>
  <div style="line-height:0pt;border:1px solid red;" align="left">
    <span style="white-space:pre-wrap;  font:normal 9pt Helvetica; color:rgb(0,0,0);">Administrative Services Provided by:</span>
  </div>
</div>

As for inline-block usage, it's a common problem of white spacing: Fighting the Space Between Inline Block Elements

score 0 · Answer 2 · answered Feb 16 '15 at 13:03

set display:inline; to all div elements, otherwise you have inline elemnet with block element child, which will make inline element colapse (width and height = 0) and child properties are displayed instead- display:block;

http://codepen.io/anon/pen/GgQzjr

score -1 · Answer 3 · answered Feb 16 '15 at 13:01

.bloc_title {
  font-family : Helvetica, sans-serif; 
  font-size : 13px;
}

.bloc {
  display : inline;
  border : solid 1px red;
}

<div class = "bloc">
  <span class = "bloc_title">
    STATE EMPLOYEES' PPO PLAN
  </div>
</div>
<div class = "bloc">
  <span class = "bloc_title">
    Administrative Services Provided by:
  </span>
  </span>
</div>

Is this what you wanted ?

'display:inline' not bringing two divs in a line

3 Answers3