Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

458 LESSON 16: Using Responsive Web Design

This style sheet makes the section with the id of main have a column count of two.

And then I set it so there is always a column break before aside tags. As you can

see, I used browser prefixes (-moz-column-count, -webkit-column-count, and

–webkit-column-break-before) to help browsers provide the styling I want.

Even if there are browser prefixes, there is no guarantee that the

browsers will work with the styles. In my example, Firefox version

40 does not implement the break-before property. Always make

sure to test in as many devices and browsers as you can.

CAUTION

Figure 16.4 shows how these styles affect the page.

Output ▼

FIGURE 16.4

An iPhone showing

the layout with two

columns.