[Solved] Divide li tag into Proper Columns

[harsh1994]

CSS Design Issue:

I want to divide li tag into proper Columns. Design for the Web Page is given below

http://imagizer.imageshack.us/a/img673/8615/l3xBEC.jpg

This is the Demo Code I have tried to written

http://codepen.io/anon/pen/EjWqpM

As seen in the above figure I want to display 3 li tag per each column under each title. I also want on main container div to have only horizontally scrolling not vertically

If you cannot understand what I am trying to say please ask me at [email protected]

[Paulie_D]

Something like column-count?

http://codepen.io/Paulie-D/pen/XbaPRg

[harsh1994]

I know it is possible using column-count but don’t know how to use it.

The Demo Code I tried to wrote is :

#main > li > ul{
column-count:auto;
-moz-column-count:auto;
-webkit-column-count:auto;
}
#main > li > ul li{
column-width:300px;
-moz-column-width:300px;
-webkit-column-width:300px;
}

But not working properly so, can you show me how to make proper use of column-count

[Paulie_D]

Why are you using auto…you wanted 3 columns…just use 3 like I did?

[harsh1994]

I don’t want exactly the 3 column. I want 3 li tag per each column ( As seen in figure “List 4 El” starts from new Column ). As the li tag increases column increases.

Please see this Img :
http://imagizer.imageshack.us/a/img673/8615/l3xBEC.jpg

li tag displayed under each title are 3 per each column.

Also I want horizontal scrolling not vertical so I have given the main container div a fixed height with css white-space:nowrap property.

Hope you understand what I am trying to say…!!!

[Paulie_D]

Ohhh…that’s gonna be funkyy…

Not sure you can do that without some magic numbers

[Paulie_D]

Hmmm…flexbox might be an option

http://codepen.io/Paulie-D/pen/MwvLbQ

[harsh1994]

Yeah I think you are right Flexbox is the only solution. But please post if you find any better solution than Flexbox.

[aiden1988]

Hi Paulie, thanks for the explanation, I will try to follow the code and will check the output.

[harsh1994]

I have developed something similiar to the design I have posted in the question so I would like to share with you all.

Please update it to make the design more proper

https://codepen.io/anon/pen/rVJEOY

[Author]

Posts