www. Expression - Web - 3 .com

Quick Start Checklist

 

 

Video Tutorials

CSS & HTML Tutorials

 Training DVDs & Products

 

 

 

 


Expression Web 3 Tutorials for Beginners

Delicious Bookmark this on Delicious

How to Center a Div

This tutorial discusses ways to center a Static Div on a web page.  For instance, just click and drag a div from the Toolbox and onto your web page.  This is a Static Div. 

 

 

Center a Div

The typical way to center a div, such as the container, is to follow these steps:

  • 1.  Place a <div> on a web page.
  • 2.  Click New Style (manage styles panel)
  • 3.  Make the selector #container
  • 4.  Specify a width (a width is neccessary)
  • 5.  Set left and right margins to auto. (this too is neccessary)
  • 6.  Click Ok, Save your work.  And preivew it in a browser.**

**Give the div a temporary height so you can see it in a browser when you preview it.

 

 

Hover your cursor over the image below to see a message.

 

Key Point:  Specify a Width and auto margins for the left and right.

 

There is Another Way

A div can be centered by using a margin on both the left and right, plus leave the width blank.

 

Why does this work?  Well..... a div is a block level element.  As such, if we leave the width of a div blank, it will simply expand across the entire width of the page or the width of the div it is nested inside of.  Adding left and right margins creates space between the left and right edge of the div and the page or div it is nested inside of.     

 

 

  • 1.  Place a div on your web page.
  • 2.  Click New Style, Make the Selector #container
  • 3.  Set the margins to 10px for top and bottom, 25px for left and right. Also set the padding to 10px for all 4 sides.
  • 4.  Background color: #000000 (black)
  • 5.  Font Color: #FFFFFF (white)

The Style will look like the following:

 

stle 

 

 

 

A Width is not necessary because a static div is a Block Level Element, which means the will automatically extend all the way across the initial containing block (the body) or the parent div in which it is nested.

 

Therefore, adding equal left and right margins to a static will cause the div to be centered horizontally.  (this cannot be done with a layer, which is absolutely positioned (ap).  Well, if you use negative margins on the left and right, then you could center an ap div.)  But in general, an absolute div (ie. layer) requires a width.  Without a width, a layer is only 1 pixel wide.

 

You could try to apply auto margins Left and right for the layer, but this only works with a static div. 

 

But what if I want to center the container that has a % for a width?  (ie. a fluid layout)

No problem.  Simply provide auto margins for the left and right, and the div will center. 

 

It does not matter which unit of measurement you use for the width of a div.  You can use pixels, percentages, or ems.  Just add the auto margins for the left and right, and that's it....the div will be centered.

 

Example:

#container { width:95%; margin: 0 auto 0 auto; }

Summary

You can specify the width a div using pixels, ems, or % and still center the div.  The div must be a static div, with a width, and auto margins on the left and right.

 

Or- do not specify a width and just specify EQUAL Right and Left Margins....and the static div will center.  This is because the width of the div will be determined by the amount left over after the margins are applied.  It also means the container will stretch or shrink based upon the size of a viewers computer screen.

 

However, you cannot center (using reasonable methods) a Layer because it is Positioned Abosolute.