CSS - "Reverse" Floating of Elements - how keep them at the bottom?

Question

Hi there

I'm currently facing an interesting CSS issue for which I couldn't find anything related on the web. I know it must be solvable, perhaps you guys crack the nut.. (?)

Following problem: I need to display some icons in front of an image positioned at the bottom left. As the number of icons can vary, the icons are floated next to each other (max. three per row - defined by the width properties).

Here's my HTML code (the div containing the icons is positioned absolute over an image):

<div class="labels">
<ul>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
</ul>

And the related CSS:

.labels { position: absolute; bottom: 20px; left: 5px; z-index: 50; }
.labels ul { display: block; min-height: 20px; overflow: auto; width:210px; }
.labels ul li { float: left; list-style-type: none; margin: 0 5px 3px 0; }

To get you a picture what it looks like and what the goal is i've scratched it up for you: see here (I'm not allowed to upload images..): link text

As you can see the icons are floated left, but obviously starting at the top. That's not nice, because I want the floating kind of reverse starting from the bottom left, filling the width of the ul-element and continue the floating on the next row up.

Any idea how to solve this? Any help is highly appreciated!!

Answer 1

I'm afraid there is no pure CSS way to accomplish this. Floating always goes top to bottom just as the document layout in principle.

You could write some helper method to generate this piece of markup for you. Fill up list items in block-reversed order and insert some empty items. Alternatively, render several lists one under the other.

Answer 2

You can't achieve this effect from CSS only because it is against the floating rules.

What you could do is to insert empty <li>, let's call it 'spacer' that will fill the space of the 3rd icon in 1st row and push the remaining content down.

Otherwise - you'd have to split your <ul> into 2 lists, and again align everything.

Answer 3

Hm.. that's a pitty - but thanks for the good hints and your thoughts about it.

I'll go and check if I can handle it with either empty items (which is in my point of view is not the very nicest way), or additional lists which I place one by one at the top of each other. But the second thing is going to be hard as well as the lists need to be positioned absolutely!..

Thank you guys.