Web design & Internet tutorials
Search the site...
Home» Tutorials » Expression Web » Create a Centered Layout using Div Tags and CSS Layout in Expression Web

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

Posted by Janine Warner - September 8, 2012 - Expression Web, Tutorials

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.

expression-web

Comments are closed.




© 2001 - 2020 All rights reserved. DigitalFamiliy.com | Terms & Conditions of Use | Privacy Policy

This is a demonstration store. No physical products will be shipped. Dismiss