2

I'm trying to create a multi-column list but the result I'm getting is not the desired.

In this example, I need to break the right list into a 2nd column at when the height reaches i.e. 400px and the same with the rest of the <li> elements (in the link above, I want to break the column into 2 after "BABY GIFTS" and put "MEN" in the second column.

I've tested many things such as this Is there a way to break a list into columns? and this but it doesn't create the column where I want.

Here's the result I'm after enter image description here and here's a JSFiddle

Any suggestions?

Community
  • 1
  • 1
bikey77
  • 5,484
  • 18
  • 53
  • 83

1 Answers1

1

The solutions in both questions you've referenced that involve the columns property work as they should. Your content can't split where you want it to because the 400px cutoff is too small.

http://jsfiddle.net/HVZkG/1/

#productsitemap {
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
    height: 400px;
}
cimmanon
  • 62,582
  • 13
  • 151
  • 162
  • I see your point. I'll think it over and see about it. Thanks. – bikey77 May 13 '13 at 13:58
  • 1
    There *are* properties that allow you control breaks without controlling the height. For instance `ul { break-inside: avoid; }` would force a break to happen before or after a list, but not inside. Note that Webkit browsers use the older name of this property (`-webkit-column-break-inside`) and Firefox doesn't support it at all. There's also `break-before` and `break-after` to explicitly force breaks. – cimmanon May 13 '13 at 14:15