CODEWITHSUNDEEP
jqueryhtmlcss
s_p
s_p

Reputation: 4693

List LI items and wrap over when taller than parent container

I have a list if li elements that i would like to wrap over when it reaches the height of the parent element WITHOUT scroll bars.

What is the best way to achieve this?

css

ul{height:90px; width:100%; display:block; background-color:grey;}
li{height:20px; width:60px; background-color:red;}

html

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

heres my fiddle http://jsfiddle.net/nalagg/LX4Nb/

currently it looks like this
enter image description here

would like it to look like this
enter image description here

edit it looks like a css solution is only possible above ie9. any jquery ideas please. thank you

Upvotes: 0

Views: 123

Answers (2)

Gareth Luckett
Gareth Luckett

Reputation: 917

Edit: You edited the question after I answered.

Add this to your li tag to give you 2 columns

float:left;
width:50%;

or this to give you three columns

float:left;
width:33.3%;

http://jsfiddle.net/LX4Nb/4/

Upvotes: -1

disinfor
disinfor

Reputation: 11533

You can use columns. But granted this doesn't work in IE9 or below. ul{column-count:3; -webkit-column-count:3; -moz-column-count:3;height:90px; width:100%; display:block; background-color:grey;}

This solution unfortunately does not allow for auto columns, meaning it will always have that number of columns and make the content fit.

Upvotes: 3

Related Questions