No replies
Arkkimaagi
Offline
Regular
Last seen: 18 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-05-11
Posts: 29
Points: 0

Hello, I have an list, and I can not modify the html, only the css. I'd like the outcome to be approx certain width and have multiple li's on multiple rows.

here's the sample code (with unnecessary features stripped):

<ul>
  <li><a href="#"><img src="http://www.a.com/sample_image1.gif" alt="1" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image2.gif" alt="2" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image3.gif" alt="3" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image4.gif" alt="4" width="20" height="20" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image5.gif" alt="5" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image6.gif" alt="6" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image7.gif" alt="7" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image8.gif" alt="8" width="30" height="30" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image9.gif" alt="9" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image10.gif" alt="10" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image11.gif" alt="11" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image12.gif" alt="12" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image13.gif" alt="13" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image14.gif" alt="14" width="20" height="20" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image15.gif" alt="15" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image16.gif" alt="16" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image17.gif" alt="17" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image18.gif" alt="18" width="30" height="30" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image19.gif" alt="19" width="16" height="16" /></a></li>
  <li><a href="#"><img src="http://www.a.com/sample_image20.gif" alt="20" width="16" height="16" /></a></li>
</ul>

and the css:

ul{
  width:10em;
  list-style: none;
  background-color: #828288;
}
ul li{
  width:auto;
  height:auto;
  float: left;
  position: relative;
  text-align:left!important;
}
ul li a img{
  border:1px solid black;
  background:red;
}

As you can see, the images can be of many sizes. (I've set their sizes here into img tags, in real site that's not possible, image sizes just vary.) Also the layout looks ugly, I'd like to have as many images in as small space as possible. (while still looking good)

Is there any way to do this better?

~ Arkkimaagi ~
Experto credite