Height of div using float

Question

Height of div using float

Asked 7 years ago

Viewed 68 times

0

I need help to complete a part of my PAP, perhaps one of the most important parts, photo album, only I have a big problem with divisions, Oops, I walk the wheel of error and nothing. I have here an example of my code, but the problem is explicit. I can’t get her to div Increase exterior by adding other Divs inside.

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
  /*Background color just for example*/
  background-color: yellow;
}

div.desc {
  padding: 15px;
  text-align: center;
  /*Background color just for example*/
  background-color: yellow;
}

<div style="color: #ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify">
  <h3 style="text-align:center;color: #ddd">ALBUM</h3>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

</div>

Possible duplicate of Float problem

– Woss

2017/06/09 at 22:42

2 answers

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Mateus Veloso • **1,852** points · Answer 1 · 2017-06-10T01:32:47+00:00

Solved, just add float in the main div.

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
  /*Background color just for example*/
  background-color: yellow;
}

div.desc {
  padding: 15px;
  text-align: center;
  /*Background color just for example*/
  background-color: yellow;
}

<div style="color: #ddd;float:left;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify">
  <h3 style="text-align:center;color: #ddd">ALBUM</h3>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

</div>

by Leon Freire • **2,375** points · Answer 2 · 2017-06-12T14:41:28+00:00

You can settle with the float: left;, as indicated by @Mateusveloso, or, if you do not want/can do so, with a overflow: auto;.

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
  /*Background color just for example*/
  background-color: yellow;
}

div.desc {
  padding: 15px;
  text-align: center;
  /*Background color just for example*/
  background-color: yellow;
}

<div style="color: #ddd;overflow:auto;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify">
  <h3 style="text-align:center;color: #ddd">ALBUM</h3>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

</div>