Image gallery without borders? - html

Question

I have been trying to do an image gallery for my portfolio but I want them images without borders and next to each other both horizontally and Vertically. Unfortunately All my attempts have been unsuccessful.
.portfolio {
height: 1250px;
width: 80%;
margin: 0 auto;
background-color: #CF9;
}
#thumbs {
width: 20%;
height: 50px;
color: #090;
float: left;
font-size: 0px;
}
<div class="portfolio">
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
</div>
http://www.adhemas.com/ is kind of what I'm trying to achieve, except my images are all the same size (although I would not mind a how to make them different sizes but still stacked)

Answer 1

Element IDs should be unique within your entire document. If you have more than one element with the same ID, your HTML is invalid, which is likely to cause your web page to stop working as intended.
Source: Can multiple different HTML elements have the same ID if they're different types?
I suggest you use classes instead, which support having multiple elements with the same class.
Give all your elements a class of thumbs instead of an id. Then you can use .thumbs instead of #thumbs in your CSS rule to style your elements.

Answer 2

First thing to fix is the id. You cannot reuse the id in the html.
Next you need to set the a and the img to be constrained inside the .thumb element.
Something like the following
.portfolio {
height: 1250px;
width: 80%;
margin: 0 auto;
background-color: #CF9;
}
.thumbs {
width: 20%;
color: #090;
float: left;
font-size: 0px;
}
.thumbs a {display:block;}
.thumbs img{width:100%;}
<div class="portfolio">
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/1">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/2">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/3">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/4">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/5">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/6">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/7">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/8">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/9">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/10">
</a>
</div>
</div>

Answer 3

Removing the <div> tags completely and setting the <img> CLASS (don't use ID's more than once) to thumbs stacks the images nicely next to each other with no margins (thanks to your left float). Unless there's a reason to keep the <div>'s I suggest removing them as they're just in the way, they're also block elements which goes against the inline layout you're after.