The %%columns style allows to put content side by side, in columns, just like in a newspaper. You can use it to generate simple side-by-side grids. Or more complex grids by nesting columns inside other columns.

%%columns
Content for the first column ...
----
Content for the 2nd column ...
----
Content for the 3rd column ...
/%

  • Columns determine automatically widths and heights.
  • Horizontal rulers ---- separate the content of each column.
    If you would need a horizontal ruler inside a column, use %%hr /%.

Layout#

By default, all columns have the same width, with the content aligned to the top. But you can change that.

  • Default columns
Incredibly versatile! Auto-fill and equal height.
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
Incredibly versatile! Auto-fill and equal height.
  • Vertical aligned columns : %%columns.vertical-align ... /%
Incredibly versatile! Auto-fill and equal height.
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
Incredibly versatile! Auto-fill and equal height.
  • Sidebar + Main: %%columns.sm ... /%
Incredibly versatile! Auto-fill and equal height.
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
  • Main + Sidebar: %%columns.ms ... /%
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
Incredibly versatile! Auto-fill and equal height.
  • Sidebar + Main + Sidebar: %%columns.sms ... /%
Incredibly versatile! Auto-fill and equal height.
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
Incredibly versatile! Auto-fill and equal height.

Multiple styles#

Combine multiple styles with the . separator.

  • Default
1st column
2nd column
3rd column
  • Adding a border: %%columns.border ... /%
1st column
2nd column
3rd column
1st column
2nd column
3rd column
  • Adding hover effect: %%columns.hover ... /*
1st column
2nd column
3rd column
  • Adding 3D raised effect: %%columns.raised ... /*
1st column
2nd column
3rd column
  • Adding a background color: %%columns.bg-success ... /%
1st column
2nd column
3rd column
  • Adding background color to a specific column:
1st column

2nd column

3rd column
  • Adding a background image:
Incredibly versatile! Auto-fill and equal height.
Image Styles/poppy-small.jpg Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
Incredibly versatile! Auto-fill and equal height.

Nested columns#

This is is just some %%columns sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.


This is is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Columns with borders#

Use %%columns.border
Nested columns are possible too.
Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Example#

Back Up Everything#

Automatic backup, built right into your Mac. Never worry about losing a file again. Time Machine stores an up-to-date copy of all your Mac’s files on an external hard drive, personal file sharing volume, or Mac OS X Server. That includes system files, applications, accounts, preferences, music, photos, movies, and documents.

Automatic Backup#

Enjoy effortless setup. The first time you attach an external drive to your Mac, Time Machine asks if you’d like to use that drive as your backup. Say yes and Time Machine takes care of everything else. Automatically. In the background. You’ll never have to worry about backing up again.

Go Back In Time#

See what your computer looked like in the past. Select a specific date and let Time Machine find your most recent changes, or do a Spotlight search to find exactly the file you’re looking for. Once you do, click Restore and Time Machine brings it back to the present.

Automatic Stop and Resume#

Never skip a beat. If your Time Machine backup is interrupted — because you took your portable on the road or put your Mac to sleep — Time Machine will simply stop backing up. When you reconnect to your backup drive again, TIme Machine automatically picks up where it left off.

Do Not Back Up List#

Be selective. By default, Time Machine backs up your entire system. But you can also select items to exclude from a Time Machine backup to save space on your backup disk.

Browse Other Time Machine Disks#

Browse other Time Machine disks with your Mac. Just plug in the drive and your Mac will recognize the Time Machine backup volume, even if it has backed up a different Mac.

Migration Assistant Support#

Migrate easier. Move individual users and folders from an existing Time Machine backup to set up new systems with ease. Then just start up the new Mac and you’ll be right where you left off on the previous one.

Manual Backup#

Create a new incremental backup at any time. Hold down the Control key and click the Time Machine icon in the Dock. Quick Look Before Restoring Quickly preview your files before you restore them to make sure those documents are really the ones you want.

Restore Your Mac#

Restore everything on your Mac. Time Machine will put all the files right back where the originals were — as if nothing ever happened. You can even restore your files to set up a brand-new Mac.

Preserve Access Privileges#

Back up the entire system and all users at once, while maintaining the access privileges associated with your files.