CODEWITHSUNDEEP
htmlcss
Don Rhummy
Don Rhummy

Reputation: 25830

Why does the third box appear lower on the line than the others despite the same CSS?

All the boxes are exactly the same CSS. The only difference is the first two have images and the third has text. Why is it lower?

https://jsfiddle.net/1guxjmLe/3/

It even appears lower if in the middle:

https://jsfiddle.net/1guxjmLe/4/

HTML:

<div class="content">
      <div class="photo">
        <picture>
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(min-width: 47.5625em)">
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(max-width: 47.5em)">
            <img srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" alt="">
        </picture>
      </div>
      <div class="description">
        <span>
          This is
          some text
          in here
        </span>
      </div>
      <div class="photo">
        <picture>
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(min-width: 47.5625em)">
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(max-width: 47.5em)">
            <img srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" alt="">
        </picture>
      </div>

    </div>

CSS:

.content
{
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: #fec321;
  text-align: center;
  overflow: hidden;
}

.content .photo
{
  position: relative;
  border: solid .75em #ffffff;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  display: inline-block;
}

.content picture, .content img, .content .description span
{
  position: relative;
  width: 14em;
  height: 14em;
  display: block;
}

.content .description
{
  position: relative;
  border: solid .75em #ffffff;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  display: inline-block;
}

Upvotes: 3

Views: 45

Answers (2)

samurai_jane
samurai_jane

Reputation: 835

You need to add vertical-align: top; to the .description and .photo since you have defined these <div>s as inline-blocks.

See the fiddle.

Upvotes: 1

Jacob G
Jacob G

Reputation: 14172

Just use vertical-align:top:

.content .description,
.content .photo {
  vertical-align: top;
}

JSFiddle Demo

Upvotes: 4

Related Questions