- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
If I specify a height to the
Is there any other way to get the effect I’m looking for (example 2) without using the height attribute?
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.