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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With