Grow your CSS skills. Land your dream job.

Floated Lists – How do I make them start on a new line?

  • # April 12, 2011 at 6:07 pm

    I’m trying to figure out how to change this functionality in CSS.

    http://iavi.com/floating-list.html

    I’ve got several list items that are being floated to the left. When the list items fill up the screen horizontally they move to the next line and continue. Unfortunately they do not move down past the tallest

  • in the previous line. Instead they stack next to it (as seen in the link above).

    If I specify a height to the

  • ‘s I can get the effect I’m looking for. But since these list items contain text, I’d rather not do that.

    Is there any other way to get the effect I’m looking for (example 2) without using the height attribute?

# April 13, 2011 at 4:21 pm

A quick fix for this example would be to make the bottom padding on all the lis a little bigger. This would force #10 to go to a new line.

Otherwise, you could add a class of “first” to each of the lis in column 1, then set “clear: left” so it goes to a new line, but there are no floats allowed on the left side. But, if your lis in each row are oddly sized, this make awkward rows.

If you want to have a perfect layout like in your example, width one column that spans two rows, you will have to either specify widths or get very lucky with how much text is in each li.

Alternatively, there are some column layout CSS3 techniques you could use. But browser support is limited.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".