HTML and CSS Reference
CONTROLLING WHERE THE COLUMNS BREAK
A number of properties defined in multi-col are intended to allow you to set where
columns will break. To illustrate this, let's look at the file our-friends-multi-col.
html. It is the same as the previous version of this example you saw, but I've added
some <h3> elements into the mix and an unordered list to experiment with. As is,
the situation isn't great; you'll tend to get unsightly column breaks in places, such
as just after the <h3> s.
To re m e d y t h i s p ro b l e m , y To u n e e d t To t e l l t h e b ro ws e r w h e re t To b re a k y To u r
columns! The available break properties and their values are as follows:
break-before . Controls breaking before the element(s) being selected. Pos-
sible values are auto , always , avoid , column , and avoid-column .
break-after . Controls breaking after the element(s) being selected. Possible
values are auto , always , avoid , column , and avoid-column .
break-inside . Controls breaking inside the element(s) being selected. Pos-
sible values are auto , avoid , and avoid-column .
NOTE: There are other break property values besides those listed, but they
only apply to paged media: avoid-page , left , page , and right .
To s t To p t h e c To l u m n s f ro m b re a k i n g a f t e r h e a d i n g s , y To u c To u l d u s e t h e fo l l To w -
It is also best to always break columns before the <h3> s so they appear at the
top of the columns. This can be done like so: