Check out the full screen result here: http://jsfiddle.net/anik786/UYkSf/4/embedded/result/
Here's where you can find the HTML/CSS: http://jsfiddle.net/anik786/UYkSf/4/
This is the HTML code:
<div class="gallery_container">
<div class="pic">
<img src="http://petapixel.com/assets/uploads/2012/02/sample1_mini.jpg" />
</div>
<div class="pic">
<img src="http://www.ndaccess.com/Sample/Images/Image1.jpg" />
</div>
<div class="pic">
<img src="http://petapixel.com/assets/uploads/2012/02/sample1_mini.jpg" />
</div>
<div class="pic">
<img src="http://www.ndaccess.com/Sample/Images/Image1.jpg" />
</div>
<div class="pic">
<img src="http://petapixel.com/assets/uploads/2012/02/sample1_mini.jpg" />
</div>
<div class="pic">
<img src="http://www.ndaccess.com/Sample/Images/Image1.jpg" />
</div>
And this is the CSS:
* {margin: 0; padding: 0;}
body {background: black;font-family: arial;}
.gallery_container{
/* Add your styles to center the container on the page */
}
.pic {
height: 300px;
width: 300px;
overflow: hidden;
margin: 20px;
border: 10px solid white;
float: left;
}
.pic img{
height: 300px;
width: 300px;
}
The issue arises when the window size reaches certain widths, creating too much space on the right side (you can test this with the full screen result by resizing the browser).
To tackle this problem, I am attempting to centralize the container so that the gallery remains in the middle of the screen at all times. Typically, I would use:
margin: 0 auto;
However, this approach doesn't work since I don't know the exact width of the container (as it relies on the window size).
I would appreciate any assistance! Thank you in advance!