2

Example jsFiddle, but make sure you use a new browser that supports one of the following to view:

-moz-column-count: 3;
-webkit-columns: 3;
-o-columns: 3;
columns: 3;

Using the new CSS3 column attribute, I'd like to see if there is a way to prevent a block of text from being spanned across columns. What I have is a three column layout inside a div using columns:3 and dt/dd tags and text inside of that. So the browser automatically makes the columns for me. But I don't want the dt and associated dd tags to span two columns. Is there a way to wrap the dt and dd tags together so that the browser will grow the column down, rather than splitting up the content?

Same with paragraph tags: can I tell the browser not to span a paragraph, instead make the column taller?

slolife
  • 19,520
  • 20
  • 78
  • 121
  • Have you looked at this: http://stackoverflow.com/questions/6424088/css-column-breaks-not-doing-anything? – j08691 Jun 05 '12 at 19:33
  • Closing this one. It is a dup of a number of other questions, but I didn't know to search for column-break-inside – slolife Jun 05 '12 at 21:00
  • possible duplicate of [css3 columns without cutting paragraphs](http://stackoverflow.com/questions/9784239/css3-columns-without-cutting-paragraphs) – slolife Jun 05 '12 at 21:00

0 Answers0