Creating a 3 columns fixed CSS layout

In this tutorial we will use the Flexi CSS Layouts Dreamweaver extension to create a simple 3 columns CSS layout with a fixed width. The layout will have a header and footer and the content part will be split in 3 columns. Using the Flexi CSS Layouts extension, the layout will look the same in all major browsers.

Requirements for this tutorial:

• Adobe Dreamweaver CS3, CS4 or CS5
• Flexi CSS Layouts Dreamweaver extension

Flexi CSS Layouts is an easy to use Dreamweaver extension that helps you create table-less HTML layouts without coding, in less than 5 minutes. You can simply create the page structure directly from the interface and the extension will automatically create the divs and CSS for your layout. Or choose from a wide range of embedded templates for your layout, then customize the layout with your own CSS rules.

Quick Steps

• Installing the Flexi CSS Layouts Dreamweaver extension
• Setting the layout main properties
• Adding the header, footer and content rows
• Adding 3 columns in the content area
• Uploading the page on the production server
• Suggested usage of the layout

Step 1. Installing the Flexi CSS Layouts Dreamweaver extension

Before you open the Flexi CSS Layouts, you need to download and install this Dreamweaver extension. To download the extension, go to the product page and download a free trial, or if you have bought the product you can find the download link in your account on Extend Studio site.

After you have downloaded the Flexi CSS Layouts kit, you need to install the Dreamweaver extension. Open the archive and double click the .mxp file and the Adobe Extension Manager should open and install it automatically. Or you can extract the archive, open the Adobe Extension Manager and select install. Then search the folder where you extracted the .mxp file and click open.

After you did these steps, open Dreamweaver, go to the Insert Panel (press CTRL+F2), find the Flexi CSS Layouts tab and press Insert Full Page Layout. See the picture below:

Insert Full Page Layout

Step 2. Setting the layout main properties

After the Flexi Layouts interface opens up you will see a popup window where you need to set the layout main properties. Set the width to 960px, layout align center and no background color. As a best practice, set the CSS rules to be written to an external CSS file.

Creating a new Layout

Press ok and let's get started. You need to add 3 rows: header, content and footer.

Step 3. Adding the header, content and footer rows

Go to the Insert Rows tab, and select 3 rows:

Selecting 3 rows

A popup will open and we need to specify the minimum height of the rows. The first row will be the header, and set it to 100px. If you have more content, the row height will increase automatically. Set the second row to  600px (should be larger because the content will come there). The last row will be the footer; set it to 100px height and press ok.

Setting the 3 rows height

In the structure tab, double click the first row and name it "header" and the 3th row footer.

Step 4. Adding 3 columns in the Content area

Select the second row, go to the Insert Columns button and add 3 columns.

Adding 3 columns

A new popup will open where you should set the width for the 3 columns. Set the first column width to 180px, the second column to 580px and the last column to 200px. If you set a column's width bigger than the available space then the Flexi Layouts interface will let you know.

Adding 3 columns

Name the columns from left to right: Left Sidebar, Content and Right Sidebar.

Step 5. Uploading the page on the server

Once you click Insert, the Full Page Layout with 3 custom css columns and header and footer is inserted in the page. Your new css layout should look something like in the picture below:

Full Page Layout

All you need to do is to fill the page with content and upload the file and the /includes folder to the testing server. Note: Before uploading the site on the production server you should set the Debug mode to off for all the files. To do this, click on "turn debug mode off" in the Flexi CSS Layouts panel in Dreamweaver.

Suggested usage of the layout

• In the header you can add your own logo and navigation menu. You can take a look at the Creative DW Menus to build a cool flash menus in seconds. Or if you like, you can add a cool flash slideshow in your header. Building a cool flash slideshow easy and fast can be done with Image Show Pro.
• In the second row, add 3 columns representing the content section of the page. We will add a left sidebar, where you could add a vertical menu. The second column will be the main content are where you will add text, images or whatever content you might need. In the right sidebar you can add some links, affiliates, your facebook badge, ads and other stuff you might think of.
• In the third row (the footer) you might want a copyright notice, a sitemap link, some contact info, some tweets.