Question

I have 3 divs, all of a set height and width. The middel one has an extra line but it’s still well within the 250px of the parent div. Yet it causes the two divs on either side to move down a little. Can someone explain why it’s doing this so I can understand going forward?

<div id="eventListBox">

    <div class="eventListItemBox"> 
        <img src="./icons/bluedude.png" />
        <h1>Test Item 1</h1>
        <h2>Jan 6th, 2012</h2>
        <h2>5/11</h2>
    </div>


    <div class="eventListItemBox"> 
        <img src="./icons/cookies.png" />
        <h1>Very long title to cause wrap on line</h1>
        <h2>Jan 15th, 2012</h2>
        <h2>2/9</h2>
    </div>


    <div class="eventListItemBox"> 
        <img src="./icons/cookies.png" />
        <h1>Test item 3</h1>
        <h2>Jan 15th, 2012</h2>
        <h2>2/9</h2>
    </div>


</div>

CSS:

#eventListBox{
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 150px;
    left: 75px;
    right: 75px;
    text-align: center;
    background-color: rgba(0,0,0,0.25);
}

.eventListItemBox{
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 250px;
    height: 250px;
    background-color: rgba(0,0,0,0.25);
}

.eventListItemBox h1{
    margin: 0px;
    padding: 0px;
    font-size: 1.5em;
    font-weight: normal;
}

.eventListItemBox h2{
    margin: 0px;
    padding: 0px;
    font-size: 1.2em;
    font-weight: normal;
}

Answer 1

Your boxes are not aligning evenly due to the fact that your divs are being displayed inline and because of this they need to be “told” how to vertically align themselves within a line-box, which you can do by using the vertical-align property. By default, all inline elements have a vertical-align value of baseline, which is why both your right and left divs are sticking to the bottom, so to fix this you need to tell them to stick to the top, to properly align all of your divs, you can do that by overwriting the default vertical-align value and set it to top, like so:

CSS

.eventListItemBox {
    vertical-align:top;
}

You can find a more detailed explanation as to why this happens (with examples) on this article.