CODEWITHSUNDEEP
htmlcss
Mario Parra
Mario Parra

Reputation: 1554

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

Upvotes: 1

Views: 146

Answers (3)

Fencer04
Fencer04

Reputation: 1123

I would float the divs. Update this part of your CSS:

#events-cont .events-row .event-card {
    padding: 0 15px;
    display: inline-block;
    width: 33%;
    float: left; //added to stop the divs from being pushed down.
}

Upvotes: 1

Turnip
Turnip

Reputation: 36632

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

Upvotes: 3

Stickers
Stickers

Reputation: 78676

Because the default value of vertical-align is baseline. This should fix it.

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

Upvotes: 1

Related Questions