Inline-block not lining up correctly

Question

I don't understand why my divs using display:inline-block aren't lining up properly. They have the same height, they should fit within a container div with room to breathe, yet the elements are all over the place.

http://jsfiddle.net/smittles/83jYY/6/

With the following markup and CSS:

<div class="content-wrapper"> <a href="#" class="row-link">
        <div class="row">
            <div class="number-wrapper">
               <div class="number">1
               </div>
            </div>
            <div class="text-container">
                <div class="title">Santa</div>
                <div class="desc">Santa is Awesome</div>                    
     <div class="host">northpole.com</div>
            </div>
            <div class="more-wrapper">
                <div class="more">
                    more about Santa
                </div>
            </div>
       </div><!-- end row -->
   </a> 
<!-- end block-level row-link -->

 .row {
    width:960px;
    margin:3px auto;
    display:block;
    height:110px;
}
a {
    text-decoration: none;
}
.number-wrapper {
    display:inline-block;
    height:100px;
    width:120px;
    background: #e8e8e8;
}
.number {
    display:inline;
}
.text-container {
    display:inline-block;
    width:600px;
    height:100px;
    background: #9c9c9c;
}
.more-wrapper {
    display:inline-block;
    height:100px;
    width:150px;
    background: #000;
}
.title {
    font-size:30px;
    color:red
}
.desc {
    font-size:18px;
    color:white;
}
.host {
    font-size:10px;
    color:green;

}

Can somebody tell me why these elements aren't lining up in a straight row?

score 4 · Accepted Answer · answered Dec 05 '13 at 20:36

For default elements with inline-block has the value for vertical-align as baseline :

Align the baseline of the box with the baseline of the parent box.

See more here. You can change it for top or middle:

.number-wrapper {
   vertical-align:top;
}

The demo http://jsfiddle.net/83jYY/9/

score 0 · Answer 2 · answered Dec 05 '13 at 20:36

Is there a reason why you wouldn't want to just use floats? Switch those divs to display:block and float them left, and you have the behavior you're looking for.

.number-wrapper {
    display:block;
    height:100px;
    width:120px;
    background: #e8e8e8;
    float:left;
}
.number {
    display:inline;
}
.text-container {
    display:block;
    width:600px;
    height:100px;
    background: #9c9c9c;
    float:left;
}

http://jsfiddle.net/83jYY/10/

Inline-block not lining up correctly

2 Answers2