Multiple images in a Div CSS
https://stackoverflow.com//questions/25078550
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I'm making a simple css Box layout with images that float left, and it works fine when I place them in seperate div's :
<div id="images">
<figure>
<img src="photos/image1.jpg" alt=”Photo” width=150 height=150>
<figcaption>Watch #1</figcaption>
</figure>
</div>
<div id="images">
<figure>
<img src="photos/image2.jpg" alt=”Photo” width=150 height=150>
<figcaption>Watch #2</figcaption>
</figure>
</div>
<div id="images">
<img src="photos/image3.jpg" alt="Photo" width="150" height="150">
</div>
CSS:
#images {
float:left;
border-style:solid;
border-width:3px;
padding:20px;
margin:5px;
height:220px;
width:220px;
overflow:hidden;
text-align:center;
}
But I receive an error: "duplicate ID reference" I've googled and its told me this definitely should be avoided,
but everytime I add all the images into the div my code doesnt work and they just end up everywhere. Can anyone help?
Cheers
Solution
An ID is a unique attribute of an element, which can only be used once on a page.
What you can do to solve your issue, is the following:
WORKING DEMO: JSFiddle
HTML:
<div class="images">
<figure>
<img src="http://placehold.it/150x150" alt="Photo" />
<figcaption>Watch #1</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="http://placehold.it/150x150" alt="Photo" />
<figcaption>Watch #2</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="http://placehold.it/150x150" alt="Photo" />
<figcaption>Watch #3</figcaption>
</figure>
</div>
<div class="clearfix"></div>
CSS:
.images {
float:left;
border-style:solid;
border-width:3px;
padding:20px;
margin:5px;
height:220px;
width:220px;
overflow:hidden;
text-align:center;
}
.clearfix {
clear: both;
}
I took the liberty to add <div class="clearfix"></div>, which makes sure no other elements on the page (underneath these three div's) get shifted because of the used float.
OTHER TIPS
try this code DEMO
<div class="container">
<div class="galleryItem">
<a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="galleryItem">
<a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="galleryItem">
<a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="galleryItem">
<a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="galleryItem">
<a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="galleryItem">
<a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="galleryItem">
<a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="galleryItem">
<a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="galleryItem">
<a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="galleryItem">
<a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
Quickest way is to change the id's in the elements for classes, so:
<div class="images">
<figure>
<img src="photos/image1.jpg" alt=”Photo” width=150 height=150>
<figcaption>Watch #1</figcaption>
</figure>
</div>
Then your css to match
.images {
float:left;
border-style:solid;
border-width:3px;
padding:20px;
margin:5px;
height:220px;
width:220px;
overflow:hidden;
text-align:center;
}
ID's should be unique on a page, whereas classes can be duplicated as much as you want.
The ID attribute is a unique identifier and therefore must be unique. You currently have three elements with the same ID; this is invalid. Instead of using an ID you can use a class instead:
<div class="images">
...
</div>
And change your CSS to use a class selector instead of an ID selector:
.images {
...
}
Try to change #images to .images and use it as a class for div's like this:
.images {
float:left;
border-style:solid;
border-width:3px;
padding:20px;
margin:5px;
height:220px;
width:220px;
overflow:hidden;
text-align:center;
}
HTML:
<div class="images">
<figure>
<img src="photos/image1.jpg" alt=”Photo” width=150 height=150>
<figcaption>Watch #1</figcaption>
</figure>
</div>
An id must be unique in a page. Use a class if you want to describe a group of elements.
why we should not use id selector two times in a page while its working fine.
You are making an error and depending on every browser that will ever view the page to compensate for it. You can't be sure they all will.
try using class instead like
.images{
/*Your Css*/
}
You get the "duplicate ID reference" because you use the same ID more than once. You will want to use class for that instead.
You also need to close your image-tags with </img>
Here is a fiddle that shows what I've changed: http://jsfiddle.net/litari/rWSGS/
