CSS3 Columns
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Hi,
I am trying to have some content display using CSS3 columns.
In my less file, I have defined the following style:
body { .details { padding: 10px 25px; columns: 2; column-rule: 1px solid black; a { color: @white; border-bottom: dotted 1px @white; } .table th, .table td { border-top: none; } } }
However, the columns don't display. When I use the web inspector on the div which has a class of .details, I see the following:
body .details { padding: 10px 25px; columns: 2; // line has a strikethru column-rule: 1px solid black; // line has a strikethru }
What am I doing wrong?
You can see this here: betelec.ergonomiq.net/references/30-epfl...congres-et-rencontre
The text content below the image is supposed to be in 2 columns. - Thank you.
Ali Samii
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
you need to add the browser engine references for mozilla (firefox) and webkit (safari and chrome)
e.g.,div { columns:100px 3; -webkit-columns:100px 3; /* Safari and Chrome */ -moz-columns:100px 3; /* Firefox */ }
It is not supported by internet explorer though.
www.w3schools.com/cssref/css3_pr_columns.asp
www.w3schools.com/css3/css3_multiple_columns.asp
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Great, thank you Christopher.
Now a follow-up. How do I control column breaks to prevent content from being cut off or to ensure that an <h4> is not immediately followed by a column break so that the relevant content below the <h4> is in the same column?
This image is hidden for guests.
Please log in or register to see it.
See this page:
betelec.ergonomiq.net/references/28-ecole-de-metiers - Thank you.
Ali Samii
-
Time to create page: 0.070 seconds