Creating "gallery" style with ul li

Help with gallery style list

[marty3d]

Hi!
Thanks for a great forum, without your help, I'd be miles behind :)

The latest problem:
I wanted to create a list of divs using the "ul li"-technique, but I can't seem to get it right. The result should be a horizontal list of divs with automatic line-breaks depending on page width.
I can't use float:left since my divs in real-life are different height, so sometimes they stack up on each other.
If I use <span> or <a href> it works, but the divs positions vertical instead of inline.

Here's a simplified example...

css:

#gallery ul{
margin:0px;
padding:0px;
list-style:none;
}
#gallery li{
display:inline;
}
.myDiv{
width:150px;
height:100px;
}

HTML (using doctype XHTML 1.1):

<div id="gallery">
 <ul>
 <li><div class="myDiv">hello1</div></li>
 <li><div class="myDiv">hello2</div></li>
 <li><div class="myDiv">hello3</div></li>
 <li><div class="myDiv">hello4</div></li>
 </ul>
</div>

Thanks alot for your help!
/Martin

[coopersita]

I think the problem is that even though you set the width of the div to be 150, they are still block elements (they will break the flow of your document.

You need float your divs. The alternative would be to float the li (instead of dipsly inline). If your li where still blocks, they would contain the div to the appropriate size, and they wouldn't break the flow.

I don't know it this other option would work, but maybe setting a with to the li, while still inline.

[marty3d]

Thanks for your reply!
The aim was to get the divs nicely lined up and I almost got there by using floats on them, but in some cases they stacked up anyway.

I solved it (kind of) by using some vbscript to insert clear:all between each row (I'm using a fixed width of the page anyway).

But it's a pity I didn't get it right with the original idea, it had been so much cleaner...

[marty3d]

Should of course mention that why they stack up is because the height of the divs varies...