Microsoft Expression Web

"You are such an engaging teacher. You made Expression Web and CSS make sense. I was about to give up until I found your videos. Thank you!"

-- Tim, Madison WI

Learn Expression Web fast with these videos

Expression Web 2 Essentials

Advanced Expression Web

Expression Web Essentials

Upgrade from Microsoft FrontPage to Expression Web

Get Started with these free Expression Web tips

Five ways to customize the interface in Expression Web

Change link colors and remove the underline

Create external style sheets to save time with CSS

Center div tags in a CSS layout with Expression Web

Create styles to align images

Add Meta descriptions for Search Engine Optimization

Create a rollover image with the Swap Image behavior

Make global updates with Dynamic Web Templates

Test web site accessibility

Test your web site before you publish in online

More Free Tutorials

Return to the Expression Web Training Center front page

Looking for Dreamweaver tutorials? Visit our Dreamweaver Training Center

Partners and sponsors

Css Basic Training with Janine Warner at KelbyTraining.com

Video Training

.

 

Create a Centered Layout using Div Tags and CSS Layout in Expression Web

CSS is the best way to create page designs these days, but if you want your designs centered when displayed in a browser, you’ll need to know this little trick.

 

1. First, you have to specify a width of the div tag you want to center, and it has to be smaller than the display area, otherwise the divs will extend all the way across the page. To do so, select the outer most div in your design. In this example, I've named that div #container. Right-click on the name of the div and choose Modify Style (if you haven't yet applied any style to a div, choose New Style).

Figure EW Tutorial 4-1.jpg

 

2. In the Modify Style or New Style dialog, select the Position category, and enter a width. In this example, I set the width to 800 pixels.

Figure EW Tutorial 4-2.jpg

 

3. Now the tricky part. To center a div on the page, you need to set the margins left and right to auto. The effect of this is that the browser will automatically set an equal amount of space on each side of the div, effectively placing it in the center of the page. To do this, choose the Box category in the Modify Style or New Style dialog and set the left and right margins to auto.

Figure EW Tutorial 4-3.jpg

 

4. When you save the new style (and it is applied to the div) the page will automatically be centered, like the design shown here in Internet Explorer.

Figure EW Tutorial 4-4.jpg

Centering your page designs helps create the appearance that your designs fill the screen no matter what size the browser window is or what size monitor your visitor uses.

Go on to Tip 5 | Return to Expression Web main page

What others say about Janine's videos

Order Your Expression Web Training Video Today!