Hi guys, I'm trying to float different size images to the left within a fixed container.
Problem is that I want the images to fit like a puzzle like this.
With the code I have now it looks like this were the image on the next line does not sit snuggly underneath the first image. I'm sure you can do it with positioning each image manually, but would there be another solution?
Problem is that I want the images to fit like a puzzle like this.
With the code I have now it looks like this were the image on the next line does not sit snuggly underneath the first image. I'm sure you can do it with positioning each image manually, but would there be another solution?
Code:
<style type="text/css">
body {
margin:0;
}
#container {
width:600px;
}
#thumbs li {
float:left;
list-style-type: none;
}
#thumbs img {
margin:10px;
}
</style>
<body>
<div id="container">
<ul id="thumbs">
<li><img src="img/1.gif" width="218" height="218" /></li>
<li><img src="img/2.gif" width="250" height="338" /></li>
<li><img src="img/3.gif" width="218" height="218" /></li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
Comment