Reputation:

Why div element will separate when re sizing even though I have inline-block?

When I shrink the browser + button separated between checkbox event though both div have inline-block

Please see the mini version of the code:

<div style="display: inline-block;">
  <a class="plus" data-toggle="collapse" data-target="#data" href="#">
    <i class="fa fa-plus-circle"></i><span></span>
  </a>
</div>
<div class="checkbox name" style="font-size: 17px; display: inline-block; margin-left: 5px;">
  <label>
    <input name="unique_id" value="" type="checkbox">
    <div id="unique_id">name - address <span class="label label-info">display</span>
    </div>
  </label>
</div>

But I just want + button and check box will place together when re sizing like this image( without re size )

Upvotes: 0

Answers (4)

irot

Reputation: 592

Does it fit nicely if you made one of the divs a little shorter?

Reason because even with inline-block, two divs with a width of 50% might not actually fit in one row. There's a little space in between them. Not sure where it comes from; someone here should be able to provide the exact reason why.

But for me personally, what I'll do is wrap the two divs and give that parent div style="font-size:0;". Only caveat with this is that you must explicitly set the font sizes of the children div.

See JSFiddle

Upvotes: 0

Mushr00m

Reputation: 2356

When using inline-block on your elements they wrap with the parent width. So if you have a parent DIV to your structure juste add white-space: nowrap; to it. It will prevent the children with ìnline-block`to wrap (go under).

EDIT : You could also simplify your HTML structure, you have a lot of elements for a simple thing.

Upvotes: 1