Grid style floats, left to right, top to bottom

How can I make these elements flow left to right, top to bottom with no empty space to the left?

Notice how the 5th element won’t fit on the first row, but instead of taking its place at the far left of the next row, it aligns to the right, directly under its sibling, throwing off it downstream siblings, which ideally should also be on the 2nd row to the right of the 5th image, so the order should be 1-7, left to right, top to bottom…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Grid Float</title>
 </head>
 <body>
 <div style="border:1px solid #000; width:570px;">
  <ul style="list-style-type:none;margin:0;padding:0">
    <li style="float:left;text-align:center">
        <a href="#" >
            <img src="20.thumb.jpg" style="" />
        </a>
        <a style="display:block;margin-top:5px;" href="#" >Black Tea</a>
    </li>
    
    <li style="float:left;text-align:center">
        <a href="chai-tea/" title="Chai Tea" >
            <img src="4.thumb.jpg" style="" />
        </a>
    <a style="display:block;margin-top:5px;" href="chai-tea/" title="Chai Tea" >Chai Tea</a>
    </li>

    <li style="float:left;text-align:center">
        <a href="#" >
            <img src="5.thumb.jpg" style="" />
        </a>
        <a style="display:block;margin-top:5px;" href="#" >Chinese Tea</a>
    </li>
    
    <li style="float:left;text-align:center">
        <a href="#" >
            <img src="8.thumb.jpg" style="" />
        </a>
        <a style="display:block;margin-top:5px;" href="#" >Green Tea</a>
    </li>
    
    
    <li style="float:left;text-align:center">
        <a href="#" >
            <img src="9.thumb.jpg" style="" />
        </a>
        <a style="display:block;margin-top:5px;" href="#" >Herbal Chinese Tea</a>
    </li>
    
    <li style="float:left;text-align:center">
        <a href="#" >
            <img src="16.thumb.jpg" style="" />
        </a>
        <a style="display:block;margin-top:5px;" href="#" >Jasmine Tea</a>
    </li>
    
    <li style="float:left;text-align:center">
        <a href="#" >
            <img src="3.thumb.jpg" style="" />
        </a>
        <a style="display:block;margin-top:5px;" href="#" >Tea Health Benefits</a>
    </li>
 </ul>
 <div style="clear:both">&nbsp;</div>
</div>
 </body>
</html>

Use inline-block to format.

cheers,

gary

Hi Gary, thanks for the quick response. Can’t believe it was that easy. Thought I had set inline-block already, but that definitely did the trick. Sweet! :slight_smile:

How can I make these elements flow left to right, top to bottom with no empty space to the left?
Try give all the items the same height, then they can all slide by.

EDIT ) Sorry, didn’t see you already fixed it. :slight_smile: