Mario Parra Mario Parra - 14 days ago 6
CSS Question

Div contents pushing down adjacent divs

I have three adjacent divs of equal width and I'm trying to figure out why the contents of the first, which has an additional button inside, pushes down the other two divs. Is it a display issue? I'd rather understand the cause before trying to manually top-align them. Thanks!

Here is my markup:

<div id="events-cont">
<div class="events-row">
<div class="event-card">
<img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
<div class="event-card-info">
<h1>Event title</h1>
<h2>Event date</h2>
<h2>Event venue</h2>
<p>
Event description
<a href="#">Learn More</a>
</p>
<a class="tickets-button" href="#">Buy Tickets</a>
</div>
</div>
<div class="event-card">
<img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
<div class="event-card-info">
<h1>Event title</h1>
<h2>Event date</h2>
<h2>Event venue</h2>
<p>
Event description
<a href="#">Learn More</a>
</p>
</div>
</div>
<div class="event-card">
<img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
<div class="event-card-info">
<h1>Event title</h1>
<h2>Event date</h2>
<h2>Event venue</h2>
<p>
Event description
<a href="#">Learn More</a>
</p>
</div>
</div>
</div>
</div>


CSS:

* {
box-sizing: border-box;
}

#events-cont {
padding: 30px 0;

.events-row {
.event-card {
padding: 0 15px;
display: inline-block;
width: 33%;

img {
display: block;
width: 100%;
}

.event-card-info {
padding: 15px;
min-height: 300px;
text-align: left;
background: #ededed;

.tickets-button {
display: inline-block;
margin: 30px;
padding: 10px 30px;
font-size: 1.8em;
}
}
}
}
}


Demo: http://codepen.io/ourcore/pen/eBWxLz

Answer

Your .event-cards are inline-block so they are by default vertically aligned to the baseline.

Use vertical-align: top on the .event-card class:

.event-card {
    vertical-align: top;
}

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