Centering a CSS page layout in Dreamweaver
If you want to create a centered layout using CSS, you're best option is to create a layout using HTML Div tags positioned with CSS ID styles. This is by far the preferred method of creating page layouts, but it's tricky and it can take a little while to get the hang of it.
This little lesson is not the definitive guide to CSS layouts, but it should at least help you appreciate the basics, and show you how to create a centered, 2-column CSS design.
CSS is definitely the best design choice moving forward on the Web because it enables you to create flexible, accessible, and streamlined designs, but it's not the simplest option today. (To better undersand some of the simpler options, read this brief comparison of Tables, Layers, and other CSS design options.)
In this tutorial, you'll see how easy it is to center a layout in CSS, then you'll see how complex it is to create a two column layout within that centered block (and this is a relatively simple design).
This lesson just scratches the surface, but it's designed to give you an idea of how all this works. At the end of this lesson, you'll find a collection of links to additional resources where you can learn lots more about CSS.
Before you start, take a quick look at how this design will look when we're done.
I. Centering a Design Created with the CSS DIV tag
Dreamweaver gives you several ways to center a layout. The most common historically has been to create a table and then center that table on your page. If you want to use CSS, you'll use a very different approach.
First, you'll create a layout that uses a DIV tag to define the main design area, then you'll center the content.
Step 1: Start with a simple, blank document. Choose File -> New. Create a Basic Page, and make sure HTML is selected.
Step 2: On your new page, create a container layer using the DIV tag by choosing Insert -> Layout Objects -> Div Tag (or clicking on the Div icon in the Insert Panel).
Fill in the ID field with the word "container" (all lower case). You should end up with a page like this.
Step 3: Next, you'll create a new CSS style for this Div. Open the CSS panel by choosing Window -> CSS Styles. To create a new style, you have a few options: Right-click anywhere in the panel and choose New. Click the New CSS Rule icon at the bottom of the panel (it's the small one with the plus sign on it). Alternatively, you can choose Text -> CSS Styles -> New.
Step 4: In the CSS dialogue box, select Advanced, and in the box below, type "#container". Be sure that This Document Only is selected, and click OK.
Step 5: In the dialog box that comes up, you want to set the margins on the container to "auto" -- this will cause the container to float in the center of the page, with equal margins on each side.
To set the margins, in the CSS dialog, choose the Box category from the left column, then uncheck the box below Margin -- this lets you set each margin independently. Type "auto" into the boxes labelled Left and Right. Also set the background of the container to #FFFFFF (so that the container will be white).
Step 6: You also want to set the width of the main layer while you're here. Make sure Box is still selected and type "760" in the Width box. Be sure that "pixels" are the chosen unit. Now, click "OK".
Congratulations! You've created a centered box and you can put whatever you'd like into that box to create a centered page design.
Creating a Two Column Layout in a Centered Div Tag
While many design and layout tasks are easier with CSS -- changing site styles, applying code, controling the small, pixel-by-pixel changes that designers love -- there are a few things that are tougher, and creating a two-column layout is one of them.
Frankly, the easiest way to have two columns, such as a nav and a main body, is still to use a table. To do this in Dreamweaver, go to Insert -> Table, select 1 row and 2 columns, set the width to something like 760 pixels and you're done. Place the table in the middle of the DIV that you created earlier, and the two-column layout will be centered on your page.
If you want to use CSS, there are different methods for two columns, three columns, columns on patternened backgrounds, and more. If you do a Web search you'll find many alternative strategies (you'll find links to more resources at this end of this lesson), but for now we're going to keep it simple and create a two column layout inside our centered Div.
The basic strategy is to "float" one of the DIVs so that it ends up beside, instead of above, the other DIV. Here's one way to do this:
Step 1: First, we'll create an area at the top of the page for a banner image. Create that DIV by choosing Insert -> Layout Objects -> Div Tag. Fill in ID field with the word "banner" (all lower case).
Next, create a new Advanced CSS style and name it #banner (make sure the Advanced radio button is checked. Define the Box settings for this style with top padding of 3 pixels (top-padding: 3px;). In the Block category, set Text-align to center (text-align: center;). This will center your banner image within the div tag.
Step 2: Create the left navigation. First place your cursor in the main Div tag, just below the banner, and then choose Insert -> Layout Objects -> Div Tag.
Fill in the ID field with the word "left" (all lower case). Then add another DIV below the nav, and call this one "right." Into each div area, you can add the text and images from this page (or use your own text and images).
Make sure the "right" div is outside the "left div, not nested inside it (you can see nesting by clicking on the Current button in the CSS panel. If a layer is nested, you can click and drag it above the top layer to unnest it.
You should end up with a page that looks like this (note I added the red borders to help you distinguish between the div tags).
Step 3: Choose Text -> CSS Styles -> New and create a new advanced style called "#left." Dreamweaver may suggest that you call it "#container #left," but this level of specificity isn't necessary.
In the Box settings, set the width of left div to 350 pixels, set the left margin to 20 and the top margin to 15.
To get the divs to be side by side within the main div, you want to set the Float option in the Box settings to "left."
Step 4: Now you'll define a style for the right div. Choose Text -> CSS Styles -> New and define call this one "#right."
In the Box settings, set the width of right div to 350 pixels, set the top margin to 15 so that the two colums will be the same size and the same distance from the top banner.
Now here's the tricky part.
You want to set the left margin of this div to 390 pixels. Why? Because you want it to be equidistant from the left div and the right side of the container div so that you create two evenly spaced columns. To do that, you need to set the left margin to accommodate the size of the left dive, 350 pixels, plus the column space you want between the divs and between the left div and the left side of the main div.
The spacing works like this:
20 pixel marin + 350 pixels div + 20 pixel margin = 390
And that leaves 350 pixels of space for the right dive and another 20 pixel margin to the right of it to equal a total of 760 pixels, which is the size of the main container div.
Yes, creating CSS layouts requires some math skills. It also requires a lot of care. If you deviate at all from these steps (neglect to set the padding around the banner div for example) and your design may not line up the way you want it to.
But if you followed all that, you should now have created a design that looks like this one. Congrats! You're well on your way to create CSS layouts.
Partners and sponsors
