CODEWITHSUNDEEP
htmlcssimage
Tyler Dood
Tyler Dood

Reputation: 155

Stacking Rows of Images Using HTML5/CSS3?

I am trying to line images up row by row but for some reason the outcome is not what I want it to be. The only time the images break to a new line is when I fill the page. I tried overflow:hidden, but then when the images expand, they are covered by white space. I can't tell if there is something wrong with my code or if I'm just doing it wrong. I have an poorly drawn image and the the code below.

figure {
  width: 150px;
  float: left;
  margin: 0 20px 0 0;
  background: white;
  border: 10px solid white;
  -webkit-box-shadow: 0 3px 10px #ccc;
  -moz-box-shadow: 0 3px 10px #ccc;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 1s ease;
  position: relative;
}
figure img {
  width: 100%;
}
figure:hover {
  -webkit-box-shadow: 0 3px 10px #666;
  -moz-box-shadow: 0 3px 10px #666;
}
figure.tall:focus {
  outline: none;
  -webkit-transform: scale(3.0);
  -moz-transform: scale(3.0);
  -webkit-box-shadow: 0 3px 10px #666;
  -moz-box-shadow: 0 3px 10px #666;
  z-index: 9999;
}
<section class="image-gallery">

  <div class="wrapper">
    <figure class="tall" tabindex=1>
      <img src="Gallery/image.jpg" alt="" />
    </figure>
    <figure class="tall" tabindex=2>
      <img src="Gallery/image.jpg" alt="" />
    </figure>
  </div>

  <div class="wrapper">
    <figure class="tall" tabindex=3>
      <img src="Gallery/image.jpg" alt="" />
    </figure>

    <figure class="tall" tabindex=4>
      <img src="Gallery/image.jpg" alt="" />
    </figure>
  </div>

</section>

Example

Any help or suggestions is appreciated.

P.S. I apologize for my lack of paint skills.

Upvotes: 1

Views: 170

Answers (1)

PTD
PTD

Reputation: 1043

Just add this to your code and it should work fine.

.wrapper {
    clear:left;
}

Because the contents of the wrapper are floated you need to force the subsequent wrapper to clear any content to its left, otherwise they just carry on floating one after the other.

Update:

You can also include the text as you stated in your drawing. If you use <figcaption> within the <figure> it all lines up as expected. I've updated my jsFiddle to reflect that.

If you want text between the two rows of images, as opposed to being associated with the images above it, you will need use clear:left; again to push the text beneath the first row of images.

Upvotes: 1

Related Questions