Forum Moderators: open
I'm trying to center my whole web page.
I've got by whole page in between a <div> tag:
<div align="center">
</div>
works great, but doesn't pass strict validation, only transitional.
my research suggests that that using margin in css is the way to go, this does NOT work, not for me anyway.
I've tried:
<div style="margin: auto"> which is most suggest, this does NOT work.
I can get sorta close with something like:
<body style="margin: 0% 25% 0% 25%">
but it's just guessing to fit my screen resolution, it's not truly centered.
Anyone know of a robust solution?
Thanks,
Chad
<div style="text-align: center;">
does work, but not in all browsers.
it works in IE 7
it does NOT work in firefox.
I thought part of the idea of making your html correct is to help with cross browser issues? isn't that the purpose of a standard?
Here's what I'm back to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
with the
<div align="center">
passes validation, looks good in Firefox and IE
it's really a different topic, but how important is choice of DOCTYPE, is it even necessary, what are the benefits, etc.
same question for passing W3C validation, why bother?
my page looked great before I had the bright idea of trying to clean it up...
Chad
#divcenter {
width: 750px; /* This is an arbitrary number I picked, but you need to define a width whether in %, px or em */
margin: 0 auto;
padding: 0; /* optional */
text-align: left; /* IE patch */
}
This should solve your problem. Just assign the above id="divcenter" to the <div>: <div id="divcenter">
Marshall
solution does not work...
no diff from a simple <div style="text-align: center">
width doesn't seem to have an affect nor does the margin, this is consistent with my prior experimentation...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Marshall
Marshall
a:hover { color: white; text-decoration:underline; }
a { color:#800000; font-weight:bold; }
body { background-color: #778899; font-family: "Times New Roman"; }
table.callback { background-color: #376285; }
.highlight { color: #800000; }
.body { font-size:12pt; }
.bullets { font-size:18pt; }
.headers { font-size:20pt; color: #000080; font-weight: bold; }
img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }
#divcenter {
width: 750px /* This is an arbitrary number I picked, but you need to define a width whether in %, px or em */
margin: 0 auto;
padding: 0; /* optional */
text-align: left; /* IE patch */
}
pretty small, can't see anything overriding
Also, it works for me using 4.01 transitional in FF 2.0.0.6.
[edited by: Marshall at 5:54 am (utc) on Sep. 16, 2007]
#content {
margin: 0;
padding: 0; /* optional */
width: match width of #divcenter;
}
If you add padding to this, you may have to adjust its width, e.g.
#content {
margin: 0;
padding: 5; /* optional */
width: 740px;
}
HTML
<div id="divcenter">
<div id="content">
All your content.
</div>
</div>
And if you do this, make the padding for the #divcenter zero.
Marshall
[edited by: Marshall at 6:18 am (utc) on Sep. 16, 2007]
I eventually got there, I'm going to list a long bit of code, only to show the progression of how I got to finally understanding everything.
my last div block is very simple and I feel is a robust example of how to center content about a page and be XHTML 1.0 strict compliant.
You don't need the double div, you just have to specify and match to your content the width of a single div and use the auto margin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Development</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div>
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>Text is left justified within cell, table is left justified within page, div tag serves no purpose</td>
</tr>
</table>
</div>
<div align="center">
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>Text is now center justified within the cell in IE7, but left justified in FireFox, the table is TRULY centered within page, div tag does the center, problem is align is deprecated and therefore this isn't strict XHTML 1.0, this is what we want to duplicate with css, another issue is the text alignment differences between IE and FireFox</td>
</tr>
</table>
</div>
<div align="center" style="text-align: left;">
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>This attempt to fix the discrepancy between IE and FireFox for the text alignment within the cell does so, it's now left justified, BUT so is the table within the page, this effectively overrides the affect of the align and is the same thing as no div tag at all.</td>
</tr>
</table>
</div>
<div style="margin: auto;">
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>This on it's own has no effect.</td>
</tr>
</table>
</div>
<div style="width: 1px;">
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>This on it's own has no effect regardless of width set, I tried 1px, 500px and 5000px, no difference.</td>
</tr>
</table>
</div>
<div style="width: 500px;">
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>This on it's own has no effect regardless of width set, I tried 1px, 500px and 5000px, no difference.</td>
</tr>
</table>
</div>
<div style="width: 5000px;">
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>This on it's own has no effect regardless of width set, I tried 1px, 500px and 5000px, no difference in either browser, I think in this case the table style sets the width of the table and that is that.</td>
</tr>
</table>
</div>
<div style="margin: auto; width: 1px;">
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>1px with auto 0 margin, this has an effect, but the width is not arbitrary as you can see with the following two examples at 500px and 5000px</td>
</tr>
</table>
</div>
<div style="margin: auto; width: 500px;">
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>500px with auto 0 margin</td>
</tr>
</table>
</div>
<div style="margin: auto; width: 5000px;">
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>5000px with auto 0 margin</td>
</tr>
</table>
</div>
<div style="margin: auto; width: 350px;">
<p>
content with no width specified will NOT be truly centered, your content MUST somehow have width defined for this to work, couple examples are having the width defined by an image (Marshall sent me an example of a site and i finally figured out how he chose his outer div tag width) or putting all content in a width defined table
</p>
</div>
<div style="margin: auto; width: 350px;">
<table style="width: 350px; border: 5px solid red;">
<tr>
<td>This is the solution! WAS the solution... The width of both the divs AND the table MUST be the same for it to be truly centered.</td>
</tr>
</table>
</div>
<div style="margin: auto; width: 550px; border: 5px solid red;">
<p>
short content, less that div width
</p>
</div>
<div style="margin: auto; width: 550px; border: 5px solid red;">
<p style="text-align: center;">
short content, less that div width
</p>
</div>
<div style="margin: auto; border: 25px solid blue;">
<table style="width: 250px; border: 5px solid red;">
<tr>
<td>This demonstrates some things to consider. the key to the whole thing is to match the width of your content to the width of your div wrapping your content! you must use margin: auto and a content width matched width for you div to get the centering effect, not specifying the width of the div defaults to page width which in effect destroys the centering.</td>
</tr>
</table>
</div>
<div style="margin: auto; width: 250px; border: 25px solid blue;">
<table style="width: 250px; border: 5px solid red;">
<tr>
<td>Bottom line? Only need one div and must define width of the div and match it to the width of your content.</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Development</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div style="margin: auto; width: 250px; border: 25px solid blue;">
<table style="width: 250px; border: 5px solid red;">
<tr>
<td>This example shows centering your content about a page while adhering to the 'XHTML 1.0 Strict' standard. The key is to somehow define the width of your content and match the div wrapper to that width.</td>
</tr>
</table>
</div>
</body>
</html>
After reviewing your code, I guess I do not understand why you want to use an XHTML doctype. Unless you are incorporating XML, XHTML does not mat sense. Read this thread on selecting the right doctype [webmasterworld.com] I hate to see you devote time to something that is not necessary.
Marshall
Your point is more than valid however, I have no idea why to pick one DOCTYPE over the other or why it's even important to specify a DOCTYPE.
I used to work in a large corporation where everything was internal that I worked on, we didn't care about SEO or cross browser issues, as long as it worked well in IE, we shipped it.
Now I'm trying to get a commercial site going and am learning there are other things to worry about...
I'm not even sure how I got down this path, I started by slapping together a quick page in FrontPage and starting a ppc campaign, that's working fine.
Then I started working on SEO, figured I'll have to add some other pages to my site at some point, ditched the FrontPage, went to st8 HTML with a text editor, somehow got to W3C for some reason (I knew of it previously), checked out the validators and decided I wanted to go to XHTML 1.0 strict mainly to get in the habit of coding 'correctly' for now and the future...
Just a suggestion, not a sales pitch.
They also have a free trial download. Do a web search for Expression Web.
Marshall
[edited by: Marshall at 3:23 am (utc) on Sep. 17, 2007]
I don't understand why you were trying all those other strange things...
