pageSUMMARY

How to create three columns across a fixed width website using Float Left.

Create a Three Column Layout

Decide what's going to go where and why

As figure 1 shows, the original Photoshop design allows for a three-column layout - two equally narrow columns on the left and right, and a single, wide column for content in the middle.

The thinking behind this layout is simple. The most important thing is the content, which is why it’s ‘front and centre’. The familiar horizontal menu system goes across the top, and space is allowed for navigation down the left side, which will display specific links relevant to the category being visited, as well as other relevant links to the section.

Three column website

Figure 1

The right column will be reserved for ‘hint’ and ‘tip’ panels, which will be placed near the text it relates to. If there’s no additional ‘tip’ to be displayed, the right column will remain blank - there’s nothing worse than filling up ‘white space’ just for the sake of it.

In order to achieve this layout, we’re going to create three new DIV tags which will be placed side by side within the existing #body-container div tag.

Column one - left (color it red for now)

The first (left column) DIV tag will be called #ud-left-panel (or whatever you choose). Eventually what I’d like to do is create a rounded box into which will go additional subheadings and links. To do this I’ll need to use a combination of background JPEG images and CSS wizardry, but I’ll get to that later.

For now I’m going to create the three columns as solid, colored rectangles so that I can focus on the layout and their relationship to each other. Once they’re laid out, I’ll start to style their appearance and content.

For the left column, I used the settings below to achieve figure 2.

Create the left column

Figure 2

First, ensure that the cursor (in the code window of Split View) is positioned immediately after the opening tag <div id="body-container">. This’ll ensure that the new DIV is placed within the main body container.

In the Insert Div Tag Pane:

Select ‘At insertion point’ from the popup menu. Click the New CSS Rule button.

From the New CSS Rule Pane:

Make the following selections from the New CSS Rule panel that will appear:
Selector Type: ID
Selector Name: ud-left-panel
Rule Definition: (select your existing style sheet from the popup)

In the CSS Rule Definition Pane:

Under Background
Background-color: #F00 (for now we’ll just make this a solid red)

These Background settings simply give the DIV tag a background color of #F00 (red).

Under Block
Display: inline

This Block setting serves only to side-step the ‘Double Float-Margin Bug’ which is a feature (amongst many others) of Internet Explorer 5/6.

Under Box
Width: 150
Float: left
Padding (check ‘Same for all’): 0
Margin (uncheck ‘Same for all’) Left: 60

These Box settings create a DIV tag rectangle 150 pixels wide. The setting ‘float’ is something of a misnomer. What ‘float’ does is position an element within the flow of the text and move it as far left (or right) as possible. Then other elements can appear to the right (or left) of the floated element. Essentially, this means that you can place several DIV tags next to each other within a single DIV container, thus creating ‘columns’. Before layouts became almost universally controlled using DIV tags and CSS, the only way to create columns in a website was by using tables - a cumbersome (although workable) alternative.

The Padding settings of zero ensure that any content appearing within the element will butt right up against edges of the container. The Margin settings ensure that outside the element there is no additional space above it, or to the right or left of it, but it is positioned 60 pixels from the body container’s left edge.

Once created, a red rectangle should appear containing the text: “Content for id "ud-left-panel" Goes Here” (see figure 2). If this doesn’t happen, re-check your settings - it’s easy to overlook something.

Column two - centre (color it orange for now)

The second (middle column) DIV tag I’m calling #body-content (or whatever you choose). This is where the bulk of the site’s information will reside.

For the middle column, I used the settings below to achieve figure 3.

First, ensure that the cursor (in the code window of Split View) is positioned immediately after the closing DIV tag for ud-left-panel.

In the Insert Div Tag Pane:

Select ‘At insertion point’ from the popup menu. Click the New CSS Rule button.

From the New CSS Rule Pane:

Make the following selections from the New CSS Rule panel that will appear:
Selector Type: ID
Selector Name: body-content
Rule Definition: (select your existing style sheet from the popup)

In the CSS Rule Definition Pane:

Under Background
Background-color: #C60 (for now we’ll just make this orange).

Under Block
Display: inline

This Block setting contains the “Display: inline” again to defeat Internet Explorer 5/6, a browser determined to seek out errors where there are none.

Under Box
Width: 490
Float: left
Padding (check ‘Same for all’): 0
Margin (uncheck ‘Same for all’) Left: 40

These Box settings create a DIV tag rectangle 490 pixels wide. The box ‘floats’ to the left so it butts up against the right side of the left column: ud-left-panel.

The Padding settings of zero ensure that any content appearing within the element will butt right up against edges of the container. The Margin settings ensure that outside the element there is no additional space above it, or to the right or left of it, but it is positioned 40 pixels from the ud-left-panel’s right edge.

Once created, an orange rectangle should appear containing the text: “Content for id "body-content" Goes Here” (see figure 3).

Set a middle column

Figure 3

Column three - right (color it green for now)

In the third (right column) I’m going to make use of the space by adding ‘hint’ and ‘tip’-type boxes where relevant. This means that I’ll have to ‘anchor’ them to the part of the text that they relate to. For now we’ll just create one panel which will be positioned at the top of the column.

For the right column, I used the settings below to achieve figure 4.

Create a right column

Figure 4 - click to enlarge

First, make sure that the cursor (in the code window of Split View) is positioned immediately to the left of the text which relates to the content of the panel. We’re placing this panel at the top of the column, so ensure the cursor is positioned immediately before the text: “Content for  id "body-content" Goes Here” (within the body-content DIV tag).

In the Insert Div Tag Pane:

Select ‘At insertion point’ from the popup menu. Click the New CSS Rule button.

From the New CSS Rule Pane:

Make the following selections from the New CSS Rule panel that will appear:
Selector Type: ID
Selector Name: sidenote-summary
Rule Definition: (select your existing style sheet from the popup)

In the CSS Rule Definition Pane:

Under Background
Background-color: #0C0 (for now we’ll just make this green).

Under Block
Display: inline

This Block setting contains the “Display: inline” to fool Internet Explorer 5/6.

Under Box
Width: 150
Float: left
Clear: both
Margin (uncheck ‘Same for all’) Left: 530

These Box settings create a DIV tag rectangle 150 pixels wide. The box ‘floats’ to the left as before and the margin of 530 ensures that the panel is 530 pixels away from the left edge of the body-content box.

Under Positioning
Position: absolute
Width: 150 (this will be inherited from the Box settings)           

This Positioning setting of absolute enables us to get the panel to stay next to the text it’s anchored to rather than shooting off to another part of the screen. It also prevents large, blank areas underneath the text we placed the DIV next to.

Once created, a green rectangle should appear containing the text: “Content for id "body-content" Goes Here” (see figure 4).

Create a Three Column Layout - End of Article

Go to previous article | Go to Home Page | Go to next article

Feedback required!