CODEWITHSUNDEEP
htmlcss
byCoder
byCoder

Reputation: 9184

column-count css and column separation

I have such url: http://xn----7sbabhi8cwaajmue5o.xn--p1ai/cars/search/by_man_and_model?by_manufacturer=115

there you could see that i have three columns

i have such troulbe: id="manufacturers-list" if i delete min, and height, i see that my li is separated in different colums enter image description here

enter image description here , but how to prevent this?

i didn't get why i get this separation(( why it slice my li?

css:

width: 690px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
overflow: hidden;

Upvotes: 2

Views: 135

Answers (1)

Morklympious
Morklympious

Reputation: 1095

The thing that's separating your content into different columns is the CSS column-count property (including the vendor prefixes.)

To explain both your images, the first looks like you have a set height with overflow: hidden which is going to conceal every single list item that flows past that height. If you have 50 list items but your container only has height enough for five, you're not going to see more than five.

The second looks like you've removed your height and given a column property.

I just looked at the site and you might want to remove the display: inline-block style from .man-area, remove overflow-hidden from the outside container (#vip-offers)

And SOMEWHERE you have inline javascript (or styles) giving that parent container a fixed height. I would definitely not recommend giving a fixed height with a hidden overflow. It just doesn't bode well unless you're trying to achieve a specific effect.

Upvotes: 1

Related Questions