Centering content using CSS - an expansion to Anna's tutorial

Question

Anna wrote a tutorial on how to center content using CSS for her blog. I took the liberty of expanding on the tutorial by showing how to separate the styling from the html and moving it to a separate .css file. It's trivial information for the expert coders here, but for people just starting out with CSS it should be interesting.

Anna's original tutorial

My expansion


morten

Answer 1

Good job, Morten. I'm sure Anna won't mind. On the Microsoft Expression webcasts and virtual labs site, there's also:

• Using Cascading Style Sheets, Identifiers, and Classes in Microsoft Expression Web (Level 200)
• Microsoft Expression Web Essentials (Part 2 of 4): CSS-Based Layout (Level 200)

Answer 2

Great tutorials! I am trying to accomplish something very similiar and can't get to work. I created a DWT with basically 4 main sections, the body, the #top_container, #page_content, and the #footer. There are other divs inside other divs.

I got the #top_container and #footer to work the way I want. They stretch completely across the width of the screen no matter what your screen resolutin or whether it is a wide screen monitor or not.

I am trying to get the #page_content to be centered so that there is equal white space on both side of the screen. I cannot get my #page_content to do that, it want to stay on the left side of the screen, even when I took the float left out and set float to none. I also applied the methods used in the tutorials from you and Anna, but doesn't seems to help.

My link to my test site is www.nationaltubeform.com/test.

Any words of wisdom? Thanks!

---

Randy Duly

Answer 3

Don't use position: absolute

<div id="page_content" style="left: 4px; top: 87px; right: -4px;">

<div id="left_col">

<!-- #BeginEditable "pic_placeholder" -->

<div id="pic_placeholder" style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 67px; top: 215px">

<img alt="Various Tubes" height="100" src="images/ntfphotos/Tube5_100x100.png" width="100" /></div>

Centering is actually very easy since it needs three things:

1. defined width
2. margin-left & margin-right set to auto
3. no other positioning

Looking at the above code which of those three things meets the criteria above? It sounds to me like you want a multi column in the content section to be a variation of the layout I use at http://starttoweb.com/ 

To do that you would remove the position: absolute stuff from your left column, it isn't necessary since you have defined a width for your column and using position absolute takes the image out of the document flow.

What I would do is put a defined width for all content in the center section using the page_content id. That width would be 970px or whatever you think you need for the content to fit and still have your columns (though I tend to prefer that content fit in an 800px browser that is your choice) and set the margins on it to auto.

Keep your left & right columns and add a center column that will have a left and right margin slightly larger than the defined width for each of those columns so that you have even height columns. Remove all positon: absolute from your code and let each section's margins & padding control the placement within them.

---

MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes