One of the things I love about Cascading Style Sheets (CSS) is the ability to control the layout of a web page without having to use presentational markup. A common misconception when designing a page layout with CSS is that it is a difficult task, especially if you are new to the language. I think this is mainly to do with the fact that there are so many browser inconsistencies around and the fact that there are so many different techniques on the web today. When I first started out using CSS to design layouts I often found myself scouring the web and finding quick and easy layout technique that would give me a fast result without understanding how it works. This is something that I don’t want you to do, I want you to understand how the techniques I use work. So if you haven’t done so already Subscribe to the RSS Feed so you don’t miss the rest of the series.

Create a CSS Layout Test Site

First thing is first let’s create a new site definition to house our Layout Test Site.

1. Launch Dreamweaver 8 and choose Dreamweaver Site from the Create New column in the Start Page menu. Alternatively, once you launch Dreamweaver, choose Site > Manage Sites > New, then click Site. Click the Advanced tab if necessary.

2. In the Site Name text box, type CSS Test Layout.

3. Click the file folder icon next to the Local Root Folder text box.

4. In the Choose local root folder dialog box, browse to an appropriate place on your hard drive and click the New Folder icon to create a new folder called css_test_layout.

5. Select the css_test_layout folder as the local root folder for your site.

6. Click OK to accept these minimal settings. If you came to the Site Definition dialog box from the Manage Sites dialog box, click Done from within the Manage Sites dialog box.

Now that you have your site defined, I will guide you through the first exercise, Centering a Design.

Use Dreamweaver and CSS to Center a Design

Now the issue of screen readability, given today’s modern monitors this is becoming increasingly important. One way many designers have tried to accomodate this issue is by centering their designs. So rather than span the full width of the screen these type of designs only span a portion of the screen hense easier to read line lengths. A lot of web designers / developers when starting out often ask How do you center a design in CSS? Well let me show you.

1. Create a New HTML Page. From the Start Page > Create New Column select HTML. If you have not got the Start Page displayed you can also choose File > New; then from the Basic page category, select HTML. Click Create.

2. Save the File in the root of the CSS Test Layout site and call in center_layout.html.

Using Auto Margins

OK let’ say you have a typical layout that we want to center the WRAPPER div horizontally on the screen.

To achieve this all we have to do is define the width of the wrapper div and set the horizontal margins to auto.

You could easily set the width of the div as a percentage of the body or relative to the size of the text using ems. Now for those people who still use IE 5.x and IE 6 in quirks mode (god forbid), they don’t honor auto margins, so what IE does do is misunderstand text-align: center, therefore centering everything instead of just the text. So we can use that to center everything in the body tag then realigning the contents of the wrapper back to the left.

A bit of a hack but no adverse effects. One more thing to make this work in all browsers is to set a min-width property to the body element. Because in Netscape 6 when the width of the browser window is reduced below the width of the wrapper then the left side of the wrapper spills off the side of the page.

Use Positioning and Negative Margins to Center a Design

The auto margin method does work well, but if you don’t like the hack that you need to use to satisfy IE5.x and also the fact that you must style 2 elements instead of one then using this method maybe for you.

As we did before we define the width of the wrapper div then we need to set the position property to relative and then set the left property to 50%. This positions the left edge of the wrapper in the middle of the page.

AH but I hear you say, I don’t want the left edge of the wrapper centered I want the middle of the wrapper centered. By applying a negative margin that is half the width of the wrapper then it will acheive what we are after.

It is very useful to have different techniques to center a design as you may need to use them both one day.

Don’t forget to Subscribe to the RSS FEED so you don’t miss Part 2, where I will show you how to use Float-Based Layouts to create a 2 column design.

Social Media:

| del.icio.us | Digg it | Furl | reddit | StumbleUpon | Yahoo MyWeb

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.