I am creating a personal website for an application. I am having problems with my photo gallery page. Everything is how I want it apart from where the photos are going.
There are several rows of different amounts of photos on how many depending on the width of the browser. All the photos are floated left. However there no space for a photo in the current row it goes onto the next row but the row will start at the bottom of the largest photo(in terms of hight) on the previous row. So there is lots of blank space. How do I stop this from happening?
I have attached my HTML and CSS as well as a photo of what happening as difficult to explain.
* {
box-sizing: border-box;
font-family: 'Open Sans Condensed', sans-serif;
}
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #32C4CD;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: left;
width: 16.6666%;
height: 80px
}
li a {
display: block;
text-align: center;
text-decoration: none;
color: #76CD32;
text-shadow: 0 0 3px #5345BA;
font-size: 29px;
line-height: 80px;
}
li a:hover {
color: #BA4572;
}
h1 {
color: #CD3B32;
text-align: center;
text-shadow: 2px;
text-transform: uppercase;
}
div.gallery {
margin: 5px;
float: left;
width: 300px;
display: grid;
}
div.gallery img {
width: 100%;
height: auto;
border-radius: 15px;
}
div.desc {
padding: 0px;
text-align: center;
color: #CD3B32;
}<ul>
<li><a href="index.html">Home</a></li>
<li><a href="About Me.html">About Me</a></li>
<li><a href="#sdfd">Skills</a></li>
<li><a href="#fd">Experience with Kids</a></li>
<li><a href="#dfsd">Big Questions</a></li>
<li><a href="Photos Gallary.html">Photo Gallary</a></li>
</ul>
<h1>Photo Gallary</h1>
<div class="gallery">
<a target="_blamk" href=""><img src="img/1.JPG" alt="1" width="400" height="400"></a>
<div class="desc">My Description</div>
</div>
<div class="gallery">
<a target="_blamk" href="img/2.JPG"> <img src="img/2.JPG" alt="2" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div class="gallery">
<a target="_blamk" href="img/3.JPG"><img src="img/3.JPG" alt="3" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div class="gallery">
<a target="_blamk" href="img/4.JPG"><img src="img/4.JPG" alt="4" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div class="gallery">
<a target="_blamk" href="img/5.JPG"><img src="img/5.JPG" alt="5" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div class="gallery">
<a target="_blamk" href="img/6.JPG"><img src="img/6.JPG" alt="6" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div class="gallery">
<a target="_blamk" href="img/7.JPG"><img src="img/7.JPG" alt="7" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div class="gallery">
<a target="_blamk" href="img/8.JPG"><img src="img/8.JPG" alt="8" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div class="gallery">
<a target="_blamk" href="img/9.JPG"><img src="img/9.JPG" alt="9" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div class="gallery">
<a target="_blamk" href="img/10.JPG"><img src="img/10.JPG" alt="10" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/11.JPG"><img src="img/11.JPG" alt="11" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/16.JPG"><img src="img/16.JPG" alt="16" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/Copy of IMG_7806.jpg"><img src="img/Copy of IMG_7806.jpg" alt="17" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/18.JPG"><img src="img/18.JPG" alt="18" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/19.JPG"><img src="img/19.JPG" alt="19" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/Copy of IMG_7599.jpg"><img src="img/Copy of IMG_7599.jpg" alt="20" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/Copy of IMG_7932.jpg"><img src="img/Copy of IMG_7932.jpg" alt="21" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/22.JPG"><img src="img/22.JPG" alt="22" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/23.JPG"><img src="img/23.JPG" alt="23" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/25.JPG"><img src="img/25.JPG" alt="25" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/28.JPG"><img src="img/28.JPG" alt="28" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/29.JPG"><img src="img/29.JPG" alt="29" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/30.JPG"><img src="img/30.JPG" alt="30" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/31.JPG"><img src="img/31.JPG" alt="31" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/32.JPG"><img src="img/32.JPG" alt="32" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/33.JPG"><img src="img/33.JPG" alt="33" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/34.JPG"><img src="img/34.JPG" alt="34" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/35.JPG"><img src="img/35.JPG" alt="35" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/36.JPG"><img src="img/36.JPG" alt="36" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/39.JPG"><img src="img/39.JPG" alt="39" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/40.JPG"><img src="img/40.JPG" alt="40" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/41.JPG"><img src="img/41.JPG" alt="41" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/42.JPG"><img src="img/42.JPG" alt="42" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/43.JPG"><img src="img/43.JPG" alt="43" width="400" height="400"></a>
<div class="desc">My Descripation</div>
</div>
<div>
<div class="gallery">
<a target="_blamk" href="img/44.JPG"><img src="img/44.JPG" alt="44" width="400" height="400">
<a>
<div class="desc">My Descripation</div>
</div>