Question

I realize this question (or questions that look like this) have been asked over and over and I feel like I’ve read all of them with no avail. I’m new to this so bear with me and it could be that through this frustration I’ve forgotten a fundamental nature of the list elements. Here’s my issue…

I have a thumbnail gallery with thumbs of different sizes (I’m dynamically loading thumbs from a folder upon page load). The thumbnail gallery is made using an ul. When I set the il’s property to inline so that they run back to back and not in a list the li’s don’t expand to fit the thumbs within. If I change the li display back to block (or remove display) they then expand to fit the contents… If I use display: inline-block the li content thumbs shrink to fit the li but then the li’s are still wider than the images…arg!

How do I tell the il to expand to fit the contents without specifying a size?

Here’s my CSS:

.gallery {
width: 100%;
cursor: default;

overflow:hidden;
}
.gallery ul {
list-style:none outside none;
overflow:hidden;
}
.gallery li {
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit; 

margin: 3px;
padding: 5px;   

display:inline; 
position: relative;
vertical-align:top;

overflow:hidden;
}

here’s a sample of the code after it loads:

<div class="gallery">
 <ul>
  <li><a href="brown.png"><img src="/photos/brown.png" alt="" /></a></li>
  <li><a href="blue.png"><img src="/photos/blue.png" alt="" /></a></li>
  <li><a href="light-blue.png"><img src="./photos/light-blue.png" alt="" /></a></li>
 </ul>
</div>

So when I view the page I see something like the following:

         __             __
<   ----|  |----   ----|  |----
<   ----|__|----   ----|__|----

The center boxes represent the img elements and the smaller dashed rectangles in the background are the parent li elements. (sorry I couldn’t post a pic because I’m a newbie :))

Does anyone have any ideas?

Thanks in Advance!!

Answer 1

David thanks!! – I just looked at the code you put on JS Fiddle and and couldn’t figure it out but when I changed display to inline-block it worked. Seriously I thought I tried inline-block at some point in the last million changes – oh well it works now 🙂 Thanks so Much for the reply!!!