Create a Custom Centered, 2-Column Layout with CSS in Adobe Dreamweaver 8, CS3, & CS4
In this tutorial, you'll find step-by-step instructions for creating a simple, two-column, centered design using divs and CSS in Adobe Dreamweaver 8, CS3, and CS4.
STEP 1 Plan Your Design in Advance
I created this illustration so you see how the div tags in this page are positioned. Because div tags are invisible in a browser, it's difficult to see how they work in a completed page. And, until you create styles to position them, divs simply span vertically across the page. In this image, you see the structure that I want in my final design. Notice that I created one div that surrounds all of the other divs and called it "container." All the other divs are contained within that div and I'll use that div to center the design. (Note: You can name divs anything you like, as long as you don't use spaces or special characters.)
If you want to see what this page will look like when the design is complete, follow this link to the completed HTML file with images and text in place.
STEP 2 Create a New Page and Set Page Properties
Create a new Web Site or open an existing one and choose File>New> HTML to create a new page. Choose Modify>Page Properties to set options for the entire page and Dreamweaver will automatically create the corresponding CSS styles for the body tag. In the Appearance category, you can set the font face, size, and color. In this example, I chose Arial, Helvetica, san serif; set the size to Small, and left the text color set to the default black. I also set the margins to 0 so that my design will be flush against the top and left side of the page.
STEP 3 Insert Divs for Each Section
This step can get a bit tricky, but the goal is simple--to insert a div tag for each section of the page. To do so, click the Div button in the Common insert bar at the top of the page and enter a name in the ID field for each div. When you click OK, the div will automatically span across the top of the page. The trick is to make sure that you create the divs in order and that all of the section divs are placed inside the container div. I find it easier to ensure this if I have the design area set to Split so that I can see the code while I work.
STEP 4 Add Content to Divs
Although you can create the corresponding styles as you create the divs, I also find it easier to get all of my divs and content in place before I create the styles to position them. As you can see in this image, I've inserted images and text into each of the divs that will hold my content. You can add content to divs as you would add content anywhere else on a page. I used copy and paste to insert text from a word document, and the Inset Image icon in the Common insert bar to insert the images.
STEP 5 Create a Style for the Container Div
To create a new style for the container div, choose Text > CSS Styles > New. In the New CSS Rule dialog, select the Advanced radio button and enter a name (note, your style names must exactly match your div names). For each of these divs, create an ID style, which requires typing a pound sign at the beginning of the name. ID styles can only be used once per page and are ideal for positioning divs. (Note that you can let divs span the entire page so that they auto-adjust to fill the browser window, but I've chosen to use a fixed width for this design.)
STEP 6 Create New Styles in an External Style Sheet
If you choose the radio button next to This document only, your style will be saved in the head area of your HTML file. If you choose Define in, you can save your style in an external style sheet. The advantage is that you can attach the same external style sheet to any page in your web site, a more efficient option than recreating styles for every page, and an easy way to make global updates later. To create a new external style sheet as you create a new style, choose the radio button next to Define in and click OK. In the Save Style Sheet File dialog, enter a name for the external style sheet.
STEP 7 The "Trick" to Centering a Div
In the CSS Rules Definition dialog, chose the Box category and set the width for you container. In this example, I set it to 785 pixels (a safe width for display on an 800 by 600 resolution monitor). Now for the not-so-intuitive trick you need to center the div. Notice that I've set the left and right margins to auto and unchecked the Same for All box. This causes the browser to automatically position the div in the middle of the page by creating equal sized margins on the left and right sides of the div.
STEP 8 Do the Math
The trick to this step is that you need to calculate how wide to set your story and sidebar divs. As you see in this illustration, if the #container div is 785 pixels, and we want the #story div to be 475 pixels, plus we want 10 pixels of padding around each of our divs so our text and images don't bump into each other, that means we’ve taken up 10+10 =20 pixels per div in padding. Since we have two divs that’s 40 pixels of padding total. If we add that to 475, we get 515. Now subtract that from 785 and I have 270 pixels left for the sidebar. (Yes, you can use a calculator).
STEP 9 Create a Style for the Story Div
Choose Text > CSS Styles > New. In the New CSS Rule dialog, select the Advanced radio button and enter a name. In this case, I've named it #story. Since I've already created the external style sheet, I can simple select it from the drop-down list next to Define In and click OK. In the CSS Rule definition dialog, choose the Box Category and set the width to 475 pixels, the Float to right, and padding to 10, leaving the Same for All box checked. Then select the Background category and set the background color. (In this example, I set it to white because I'm going to add a gray background color to the entire page later.)
STEP 10 Create a Style for the Sidebar Div
Choose Text > CSS Styles > New. In the New CSS Rule dialog, select the Advanced radio button and enter #sidebar. Again, choose the external style sheet from drop-down list next to Define In and click OK. In the CSS Rule definition dialog, choose the Box Category, set the width to 270 pixels, set the Float to left, and set padding to 10, leaving the Same for All box checked. Then select the Background category to set the background color of the div. In this case, I've used a golden color to better define the sidebar.
STEP 11 Create Styles for the Navbar and Footer
Choose Text > CSS Styles > New. In the New CSS Rule dialog, select the Advanced radio button and enter #navbar. Choose the external style sheet from drop-down list next to Define In and click OK. In the CSS Rule definition dialog, choose the Box Category, set the height to 20 pixels, set padding to 10, and check the Same for All box. Since I want the navbar to span the full width of the design, I can leave the width blank. Select the Background category to set the background color, and select the Type category to set the text color and style. Repeat these steps to create an identical style for the footer.
STEP 12 Use the Clear Div Trick to Keep the Divs from Overlapping
If your story and sidebar are not exactly the same length, floating them left and right like this will cause the footer to wrap up under the shorter of the two divs. This is a common problem in CSS layouts, but there is an easy fix. You can create a style that clears everything to the left and right of a div. To do so, choose Text > CSS Styles > New and select the Class radio button. Class styles can be applied multiple times on the same page and must begin with a period. In the Box Category of the CSS Rule Definition dialog, choose Clear and select Both from the drop down.
STEP 13 Apply the Clear Class Style
Unlike ID styles which are automatically applied to divs with the same name, you'll need to apply the Clear style to the div. To do so, click to select the div (I find it easiest to select divs using the tag selector in the bottom left of the design area). Then use the CSS drop-down in the Properties inspector and select the Clear style to apply it. As you see in this example, the footer div drops to the bottom of the sidebar and story divs when the clear style is applied.
STEP 14 Add a Few More Styles for Images and Navigation Elements
To achieve the final design you see here, I used Page Properties again to set the background color for the entire page to a dark grey. To align the images so the text wraps around them, I created class styles with the float set to left and right respectively, and added 10 pixels of margin to keep the images from bumping up against the text. I also created a rather complex style for the links in the navbar and footer by redefining the Anchor, Unordered List, and List HTML tags. You'll find tutorials for all of these tricks at layersmagazine.com.
This article by Janine Warner was created for Layers Magazine and published in the Jan/Feb. issue (2006/2007).
Return to Dreamweaver Training Center at DigitalFamily.com.
Partners and sponsors
