Converting the Santorini JumpStart to Use Two Columns Instead of Three

By: Heidi Bautista

Page 1 of 2

Set for printing


Don't you just love it when something turns out to be simple, for a change?

This article will show you just how easy it is to convert the 3-column Santorini layout to two columns.

The original Santorini layout achieves the three columns by absolutely positioning the outer columns and giving the center column left and right margins. The width of the center column is set to auto so that it takes up whatever room is leftover.

The two column version doesn't have the rightmost column.

Figure 1  Santorini. The original 3-column layout and the new 2-column version.

The two-column version is still fluid. The main content still grows and shrinks along with the browser window and it took only three easy edits to make the change.

Edit the HTML

First we need to delete the content in the rightmost column. It's already nicely encapsulated so all we need to do is delete the div (or comment it out as shown below).

<div id="right-sidebar">
  <h3>Featured Story</h3>
  <p>Nulla tellus massa, semper et, dictum non, ... </p>

This leaves us with a big blank space on the right side.

Figure 2  Santorini after deleting the rightmost column but before adjusting the CSS rules.

So now let's look at the CSS changes that need to be made.

Page 1 of 2 1 2 Next

Download Support Files

CMX Jumpstart, jumpstarts, css, fluid layout, two column, three column, two-column, three-column, css