Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to make CSS3 columns on a horizontal plane?

I would like to know if it is possible to produce CSS3 columns horizontally.

for ex. if I have paragraphs a, b, c, and d and I give them "column-count: 2" the output would be

a c

b d

I would like to create the column so that the output would become

a b

c d

Does anyone know if this is possible while using css3 columns?

I'd prefer my page to be scalable and that's why I'd rather use columns so that the column-count would automatically produce the right amount of columns compared to the screen size.

The original page uses mostly 3-4 columns

like image 715
user1969202 Avatar asked Feb 01 '13 15:02

user1969202


1 Answers

Giving the paragraphs a width and floating left should work if you specify a min/max width to the paragraphs. It should work with a variable width wrapper element but may break if you don't allow the paragraphs to scale much with restricted widths.

p {
    float: left;
    max-width: 160px;
    min-width: 100px;
    margin: 20px;
}

div { //wrapper
    width: 480px;
}

jsFiddle

Don't forget to clear the float in the element after the columns.

like image 88
James Coyle Avatar answered Nov 20 '22 09:11

James Coyle