Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Floated Lists – How do I make them start on a new line?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 12, 2011 at 6:07 pm #32329
    jimmykup
    Participant

    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 #51538
angus
Participant

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.

  • Author
    Posts
    • Viewing 2 posts - 1 through 2 (of 2 total)
    • The forum ‘CSS’ is closed to new topics and replies.