I'm currently working on styling a group of images that are within an unordered list in order to achieve the following:
- The
<ul>should take up the entire width of its parent element - Each
<li>should occupy 25% of the width of the<ul> - The images within the
<li>should scale proportionally when the screen is resized - There are a total of 8 images that should be arranged in two rows of 4 images each
- There should be no gaps, either vertically or horizontally, between the images
I have been able to achieve the first four objectives on the list, but I am struggling to eliminate the gap between the first and second row of images.
Below is the HTML markup:
<div class="container">
<ul>
<li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
<li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
<li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
<li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
<li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
<li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
<li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
<li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
</ul>
</div>
And this is the CSS (after a reset):
.container {
width: 90%;
max-width: 960px;
margin: 6em auto;
}
.container ul {
float: left;
display: block;
width: 25%;
height: auto;
}
.container img {
max-width: 100%;
height: auto;
width: auto\9; /* resolves a bug in ie8 */
}
Thank you in advance for any assistance you can offer.
Best regards, David