Dynamic floating columns if height exceeded

Question

I've got a questing concerning a dynamic floating layout of <li>'s in a <ul>-Container:

The grey container <ul> has a fixed height of 150px and all <li>'s in it should use the maximum height of 150px and THEN arrange in the next column (See Element 7, 8)

I'm quite shure the solution is obvious, but I'm stuck in trying several float-combinations with width and height.

Anyone suggestions or a solution?

Answer 1

You can use CSS3 columns: "CSS Multi-column Layout Module":

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

ul {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
    max-height: 20px;
}

ul > li {
    height: 20px;
}

Demo

http://jsfiddle.net/UTfD9/

Support

This will work in:

• Safari
• Chrome
• Firefox
• IE10+
• Opera 11+

See: Can I use CSS3 Multiple column layout?

Answer 2

http://www.w3schools.com/css3/css3_multiple_columns.asp

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts

The CSS multi-column layout extends the block layout mode to allow the easy definition of multiple columns of text. People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.

Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting. This limitation is solved by adding new CSS properties to extend the traditional block layout mode.

Answer 3

You can calculate how many li elements your column can fit and use the pseudo selectors (nth-child) to split it in columns. See the demo I made: http://jsfiddle.net/QqudC/1/