DCR DCR - 7 months ago 9
HTML Question

images appearing but not appearing in div

My images appear but that don't seem to take up any space in the div.

Here's my html:

<div id="header">

<img id="img_1" src="img/DSC_0195.JPG" alt="Habor 1">
<img class="img_2-5" src="img/DSC_0197.JPG" alt="Habor 2">
<img class="img_2-5" src="img/DSC_0904.JPG" alt="Habor 3">
<img class="img_2-5" src="img/DSC_0901.JPG" alt="Habor 4">
<img class="img_2-5" src="img/DSC_0903.JPG" alt="Habor 5">
<img id="img_6" src="img/DSC_0902.JPG" alt="Habor 6">
</div>


and my css:

#header {
margin:0 auto;
width: 100%;
}

.img_2-5, #img_1, #img_6{
width:16.666%;
display: inline;
float:left;
}

#img_1 {
border-radius: 25px 0 0 25px;
}

#img_6{
border-radius: 0 25px 25px 0;
}

Answer

It's because your images are floating. You need to add an overflow:hidden; property on the parent to make them take place on the div.