Text keeps being to the right of my image

Question

My Problem

I'm trying to make a photo gallery with a title underneath it for each image. But the issue I am encountering is that the title keeps floating next to the image. For Reference see this screenshot.

CSS Snippet

@media only screen and (max-width: 600px) {
  .boxGallery {
    margin-left: 50%;
    margin-right: 50;
  }
}

.GalleryBox {
  display: block;
  padding-left: 100px;
  padding-right: 100px;
  width: 100%;
}

.boxGallery {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

div.gallery {
  margin: 5px;
  float: left;
  width: 250px;
}

div.gallery img {
  width: 250px;
  height: 190px;
}

div.desc {
  padding: 15px;
  text-align: center;
}

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

Any help on how to fix this please.

Answer 1

Because you are floating the elements inside .boxGallery the parent item loses its dimensions (because it doesn't take floated content into account anymore). Because the children are floated, the title gets positioned as a 'filler' for the floats.

You can solve this by a so-called clearfix. These days a clearfix is as easy as:

.clearfixme::after {
    content: '';
    clear: both;
    display: table;
}

@media only screen and (max-width: 600px) {
  .boxGallery {
    margin-left: auto;
    margin-right: auto;
  }
}

.GalleryBox {
  display: block;
  padding-left: 100px;
  padding-right: 100px;
  width: 100%;
}

.boxGallery {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.boxGallery::after {
content: '';
clear: both;
display: table;
}

div.gallery {
  margin: 5px;
  float: left;
  width: 250px;
}

div.gallery img {
  width: 250px;
  height: 190px;
}

div.desc {
  padding: 15px;
  text-align: center;
}

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

---

Alternatively, I'd use flex for this. How I would do it:

.boxGallery {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.gallery {
  min-width: 120px;
  width: 25%;
  margin: 12px;
}

.gallery img {
  width: 100%;
  height: auto;
}

.desc {
  padding: 15px;
  text-align: center;
}

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>