Lesson 4: Multi-column layout

This lesson will introduce the multi-column properties. There are two different ways of defining columns - by column count or by column width.

Let's start by opening the file 'index.html' in the exercise4 folder. You should see a page starting with 'Lorem ipsum dolor...'.

If you look at the content of 'index.html' you can see that there are 2 articles in there, one with an id of 'mystory' and one with the id of 'yourstory'.


Open the file 'column.css' in your text editor which starts empty.

Step 1: Build multi-column example with fixed number of columns and a gap.

Step 2: Build multi-column example with fixed width that can resize for more columns.

Step 3: Build stacked fixed/variable column example.

Step 4: Add a ruler line between columns

Continue to Exercise of Lesson 5