Sunday, March 23, 2008 12:21 AMAnna 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
Wednesday, March 04, 2009 9:46 PMGood 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)
Friday, March 06, 2009 4:01 PMGreat 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!
Friday, March 06, 2009 5:40 PMDon't use position: absolute
Centering is actually very easy since it needs three things:
- defined width
- margin-left & margin-right set to auto
- 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