Good day all,
I'm conducting a course in CSS at the local community college, and the
students are sincerely interested in web standards and designing with
CSS instead of tables.
One question that continues to come up is how to successfully
center-align a fixed width layout in today's modern browsers. Here's my
feedback, which I'd like anyone to review and challenge where
applicable:
The basic CSS syntax is as follows:
html
{height: 100%;
margin-bottom: 1px;}
body
{margin: 0;
padding: 0;
text-align: center;
font: normal 12px verdana, arial, sans-serif;
background: #fff;}
#container
{margin: 0 auto;
width: 760px;}
I discuss the construction of two and three column layouts, floating
columns, clearing floats, headers, footers etc. but the crux of my input
is centering the webpage.
1. Margins set to 0 in order to eliminate default margins in IE,
Firefox, Mozilla and Netscape.
2. Padding set to "0" in order to eliminate default padding in Opera.
3. Text-align: center set to center the page in Internet Explorer 5.0 &
5.5
4. Margins must be set to "0" & "auto" in order to center-align a
fixed-width layout in IE6, Firefox, Mozilla, Netscape and Opera.
5. Placing "margin: 0 auto" in the declaration block for the body rule
doesn't center-align the layout therefore this particluar declaration
must be placed inside an "ID" and applied to a wrapper or container div.
Any opinions, suggestions or direction is very much appreciated!
Respectfully submitted,
Mario S. Cisneros
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
