CODEWITHSUNDEEP
htmlcssimage
DCR
DCR

Reputation: 15665

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;       
}

Upvotes: 0

Views: 51

Answers (4)

Guardian
Guardian

Reputation: 129

This will help.

<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 style="clear:both;"></div>        
</div>

Upvotes: 0

LaughingMan
LaughingMan

Reputation: 650

Just remove the float of your image, worked for me!

#header {
  margin:0 auto;
  width: 100%;
  border:2px solid black;
  height:auto;
}

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

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

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

https://jsfiddle.net/pkmmg6om/1/

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

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.

Upvotes: 1

Nelson Teixeira
Nelson Teixeira

Reputation: 6562

The culprit is the float: left in the css sheet.

Use other method or live with it. :)

Upvotes: 0

Related Questions