css float problem in a list

Answer 1

Not ideal, but you could make the elements all the same size, that way you'd never have a problem of things being floated to the right.

Try adding this to your CSS:

ul.iconifier li 
{
    margin-bottom: -5000px;
    padding-bottom: 5000px;
}

That CSS should make the elements the same height.

Cheers, Sean

Answer 2

Perhaps you can use http://plugins.jquery.com/project/gridLayout

Answer 3

You need to use display: inline-block; instead of float to get them to push the row below them down for modern browsers. For IE6 & IE7 use display: inline.

Replace your ul.iconifier li with this code:

        ul.iconifier li
    {
        margin: 10px;
        padding: 0;
        text-align: center;
        border: 1px solid #ccc;
        width: 8em;
        -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        display: -moz-inline-box; /* mozilla only */
        display: inline-block; /* for browsers that support display:inline-block*/
        vertical-align: top;
    }

Then add this code to make IE6 & IE7 work:

   /* Show only to IE7 */
    *:first-child + html ul.iconifier li
    {
        display: inline;
    }
    /* Show only to IE6 */
    * html ul.iconifier li
    {
        display: inline;
    }

---

I learn this approach from these sites:
http://gtwebdev.com/workshop/layout/inline-block-gallery.php
http://www.css-lab.com/demos/image-display/inline-block-caption.html

Answer 4

there is two ways the first one is using css by make a fix height for the small blocks with trimmed text to fixed length the second solution is using the server side development code by adding a clear style to the first LI on the line (note: this solution is for a fix no. of blocks at line)