A friend of mine encountered an issue with a website related to a school project. They were trying to set up a small gallery.
The first 5 pictures displayed correctly as intended, but then they appeared like this:
After testing various solutions for about an hour, we attempted placing the bottom 3 pictures in a separate div block with the class of bilder, but the outcome was the same. Rearranging the pictures in different orders to check if it had something to do with the images themselves also led to the same result.
div.wrapper {
font-family: Calibri;
width: 100%;
float: left;
color: white;
}
h1 {
color: #F99F00;
text-align: center;
}
body {
background-color: black;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: left;
font-family: fantasy;
font-size: 120%
}
li a {
color: white;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: green;
}
.active {
backround-color: green;
}
li.selected a {
color: green;
display: block;
}
#tct {
top: 15%;
left: 5%;
padding: 1%;
color: #F99F00;
font-size: 200%;
}
div.bilder img {
padding: 1%;
width: 18%;
float: left;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Counter-Strike: Global Offensive</title>
<link href="../css/waffenliste.css" rel="stylesheet" type="text/css">
<link href="pictures/csgotab.png" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="wrapper">
<div>
<h1>Counter-Strike: Global Offensive<h1>
</div>
<div>
<ul>
<li><a href="../index.html">Home</a></li>
<li class="selected"><a href="waffenliste.html">Waffenliste</a></li>
<li><a href="spray.html">Spray Patterns</a></a></li>
<li><a href="ueber.html">Über</a></a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="tct">
<p>Kaufbar für: T und CT</p>
</div>
<div id="t">
<p>Kaufbar für: Terroristen</p>
</div>
<div id="ct">
<p>Kaufbar für: Antiterroreinheit</p>
</div>
<div class="bilder">
<img id="awp" src="pictures/awp.PNG">
<img id="scout" src="pictures/scout.PNG">
<img id="dual" src="pictures/dual.PNG">
<img id="p250" src="pictures/p250.PNG">
<img id="deagle" src="pictures/deagle.PNG">
<img id="nova" src="pictures/nova.PNG">
<img id="negev" src="pictures/negev.PNG">
<img id="m249" src="pictures/M249.PNG">
</div>
</div>
</body>
</html>