CODEWITHSUNDEEP
htmlcss
c..
c..

Reputation: 1054

50% inline-blocks not displaying next to each other

Say I have

<span class="ib-half"></span>
<span class="ib-half"></span>

and

.ib-half {
    display: inline-block;
    width: 50%;
}

I expect the two spans to display side-by-side but they won't. There's no margin, padding, or border, so what's the problem?

Upvotes: 6

Views: 9725

Answers (4)

Praveen Puglia
Praveen Puglia

Reputation: 5631

Setting the font-size of the parent element to zero may be a fix.

HTML :

<div class = "parent">
    <span class="ib-half">Left</span>
    <span class="ib-half">Right</span>
</div>

CSS:

span{
    background:#bdbdbd;
}

.ib-half {
    display: inline-block;
    width: 50%;
    font-size:10px;
}

.parent {
    font-size: 0;
}

Check this fiddle. http://jsfiddle.net/YpTMh/9/

For more options please refer to http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Upvotes: 15

Matrix
Matrix

Reputation: 3369

good answer in css3 is:

white-space: nowrap;

in parent node, and :

white-space: normal;
vertical-align: top;

in div (or other) at 50%

exemple : http://jsfiddle.net/YpTMh/19/

Upvotes: 5

c..
c..

Reputation: 1054

The actual problem is the space (newline) between the two elements. Because it's an inline-block element, it registers the space, so it's 50% + the space.

Some possibilities:

<span class='left'>Left</span><!--
--><span class='right'>Right</span>

or <span class='left'>Left</span><span class='right'>Right</span>

or

<span class='left'>Left</span><span
class='right'>Right</span>

or to me it really probably makes the most sense to float: left; and change it to a display: block element. I believe the nature of inline elements is to operate in the same manner as text with some extra spacial information, so why get hacky when there's no reason to?

Upvotes: 11

user1247736
user1247736

Reputation:

Hope this will help

    <div>    
        <span class="ib-half"></span>
        <span class="ib-half"></span>
    </div>

​
       div{
           width:50%;
           display:block;
       }
       .ib-half {
           margin:0;
           display:inline-block;
           width: 49%;
           height:100px;
          }​

here i am using a parent div and setting its width and display property to block. In the child block u can set the display property to inline-block, and if u want more span to be added the u can add by decreasing the width of the span block 100/(no: of blocks) -1 . You can also use float property to get the result.

Upvotes: 0

Related Questions