can't center page - can't add color border to sides of page

[raindew01]

Hi there,
I'm really new to CSS, but have been researching it and trying it out for days.

I can't get my pages to center. I thought the div.main would, but it doesn't.

I also can't get a color border down the left and right of the page; when it appears, it stops at the very top. I would really appreciate any help!

body {
font-family: Arial,Helvetica,sans-serif;
font-size: medium;
text-align:left;
border-left: 30px solid #ffcc33;
border-right: 30px solid #ffcc33;
}
h1, h2, h3, h4, h5 {
font-family: Arial,Verdana,Helvetica,sans-serif;
}
h1 {
color: #000000;
font-size: 35px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 17px;
}
h5 {
font-size: 12px;
}
a:link {
text-decoration: none;
color: #6fa408;
}
a:visited {
text-decoration: none;
color: #629205;
}
a:hover {
text-decoration: none;
color: #f5c439;
}
a:active {
text-decoration: none;
color: #f5c439;
}
.green-times {
font-family: "times new roman," times,serif;
color: #6fa408;
}
div.content {
position: absolute;
margin-top: 200px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 800px;
font-family: Arial, Verdana, sans-serif;
}
div.header {
position: absolute;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
width: 800px;
height: 150px;
font-family: "Times New Roman",Times,serif;
color: #6fa408;
font-weight: bold;
text-align: right;
}
div.menu{
position: absolute;
margin-top: 170px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-family: Arial, Verdana, sans-serif;
color: #6fa408;
font-weight: bold;
text-align: right;
}
div.footer{
position: absolute;
margin-top: 1600px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
clear: both;
height: 5%;
font-size: xx-small;
font-family: Arial, Verdana, sans-serif;
}
.center {
text-align: center;
}
.center-table {
border-left: 30px solid #ffcc33;
border-right: 30px solid #ffcc33;
width: 100%;
margin-right: auto;
margin-left: auto;
text-align: left;

}
table#body-table {width:80%; margin-left:5%; margin-right:15%; border-left: 30px solid #ffcc33;
border-right: 30px solid #ffcc33;
}
.green-arial {
color: #6fa408;
font-family: Arial,Helvetica,sans-serif;
}
div.main {
margin: 0, auto;
text-align: left;
}

[g1smd]

That's way too much CSS to take in, and fairly useless without seeing the matching HTML that it is meant to control.

Have you used the Firebug extension for Firefox to examine the HTML 'tree' to see which bits of the CSS directly control which bits of the page, and which bits of the CSS are inherited from a parent element?

[swa66]

First validate your CSS. There are syntax errors in it. e.g.:

margin: 0, auto;

To center a block horizontally, you set a width and auto margins on the left and right.

The "text-align: center" on body and then canceling it out in a wrapper with "text-align: left;" is mostly only needed for legacy IE versions that are in quirks mode. Set a full doctype to avoid it with nothing in front of it (doens't always work, but mostly that'll do the trick for IE6)

width: 100%;
margin-right: auto;
margin-left: auto;

Is a honorable attempt, but it won't amount to much: the width of the block is going to take up all the space so the margins will be forced to be both equal to 0 ... reduce the width and it'll center.

text-align: center is supposed to center inline elements (legacy IE version get it wrong by also centering blocks).

[raindew01]

swa66, thank you so much for your reply. I really appreciate it!

I validated my CSS (I didn't even know that service existed, but I found it online). I took out the things I realized I wasn't using, and changed the marigns and width the way you suggested (at least, the way I understood).

Now it looks like the page might be centered, but it becomes too large. Also, the yellow borders still don't go down the entire page. Um--would you be able to help me figure out what I'm still doing wrong? I'd really appreciate any help.

body {
width: 100%;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, "sans serif";
font-size: medium;
border-left: 30px solid #ffcc33;
border-right: 30px solid #ffcc33;
}
h1, h2, h3, h4, h5 {
font-family: Arial, Verdana, Helvetica, "sans serif";
}
h1 {
color: #000000;
font-size: 35px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 17px;
}
h5 {
font-size: 12px;
}
a:link {
text-decoration: none;
color: #6fa408;
}
a:visited {
text-decoration: none;
color: #629205;
}
a:hover {
text-decoration: none;
color: #f5c439;
}
a:active {
text-decoration: none;
color: #f5c439;
}
.green-times {
font-family: "times new roman", times, serif;
color: #6fa408;
}
div.content {
width: 100%;
margin-right: auto;
margin-left: auto;
position: absolute;
margin-top: 200px;
margin-bottom: 0px;
font-family: Arial, Verdana, "sans serif";
}
div.header {
position: absolute;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
width: 100%;
height: 150px;
font-family: "Times New Roman", Times, serif;
color: #6fa408;
font-weight: bold;
text-align: right;
}
div.menu{
position: absolute;
margin-top: 170px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: Arial, Verdana, "sans serif";
color: #6fa408;
font-weight: bold;
}
div.footer{
position: absolute;
margin-top: 1600px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear: both;
height: 5%;
font-size: xx-small;
font-family: Arial, Verdana, "sans serif";
}
.green-arial {
color: #6fa408;
font-family: Arial, Verdana, Helvetica, "sans serif";
}
div.main {
width: 100%;
margin-right: auto;
margin-left: auto;
}

[jbinbpt]

raindew01,
Welcome to WebmasterWorld.

What do you mean by

Now it looks like the page might be centered, but it becomes too large.

[raindew01]

Thanks for the welcome, jbinbpt.

I meant that there's now a scrollbar on the bottom of the page, as it goes over the screen, and the text (and right border) on the right of the page goes off my screen, by almost an inch. As if the page is now too big.

[jbinbpt]

Is it that your text or images are causing the overflow?

[swa66]

Could you describe in words what you try to achieve ? It's hard to derive what you want to happen from code. Even if we understand the code, we end up with expecting what a compliant browser does ...

Absolute positioning allows you to use the "top", "bottom", "right" and "left" properties to set the boundary of the block that far from the referenced boundary (the referenced boundary is either the closest parent that has "position" or the viewport in the lack of such a parent ; to give an element "position", the easiest is to set position to relative or to absolute)

Since you try to position a footer: what do you want to happen should you have more content so that it sits to close (or that the window is smaller thanthe footer sits down ?
So I'm a bit uncomfy about those huge margins in there.

To center an absolutely positioned element: either set the left side to 50%, and set a negative margin of half the width of the element, or either set left and right to 0, set a width (100% is unlikely the right one to get this to work), and set the margins to auto (this latter one does;t work in legacy IE versions without scripted help)

[raindew01]

Hi swa66,
I think I don't understand positioning well enough. I am so used to thinking in terms of tables to position things; I'm finding it hard to make sense of.... I don't understand how to put things where I want them with CSS. What I want is for my header to be at the very top, then my menu, then the content, then the footer. I wanted the footer to appear at the very bottom of all the content, no matter the size of the page, and though I found some sites that told me how, I couldn't get it working properly, so I reverted to using the absolute positioning, though I thought that might not be right.

Plus, I want the entire page to be centered on the screen (but not the text), and two strips of color down the entire left and right side (with the background for everything else being white, so that the text is easy to read).

[raindew01]

jbinbpt, the text goes off the screen.... I'm assuming it's the text.... For the header, the content....

[jbinbpt]

Your font sizes for h1 to h4 seem to be on the large size. Experiment with them to see if that reduces the scroll bar.

[raindew01]

jbinbpt, I made the font sizes much smaller. It didn't change the positioning; the page still runs off/still a scroll bar.

So then I thought, it must be something in my html. I changed a few things. I think...I really don't understand positioning.

I thought doing <div class="content">text here </div> and having several of those would make one follow the other, but they don't.

Now the positioning is really messed up--but still, there's the scroll bar.

How do you get one segment of text or content to follow another? I know that must be a most basic question, but i found it hard to find the answer.

[jbinbpt]

OK. Time for you to post the html code.

Strip out anything that would identify the site and post the rest.

[raindew01]

Okay, jbinbpt. Thank you.

I kept reading more and more about CSS, trying to get it. I've changed my CSS and html again. Right now, I have it looking almost perfect in IE--*except* that there's a scroll bar down the right, inside the border--I have no idea why. But it looks screwed up in FireFox and in Opera.... (sighing)

My CSS:

body {
width: 100%;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, "sans serif";
font-size: medium;
border-left: 30px solid #ffcc33;
border-right: 30px solid #ffcc33;
}
h1, h2, h3, h4, h5 {
font-family: Arial, Verdana, Helvetica, "sans serif";
}
h1 {
color: #000000;
font-size: 25px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 14px;
}
h5 {
font-size: 11px;
}
a:link {
text-decoration: none;
color: #6fa408;
}
a:visited {
text-decoration: none;
color: #629205;
}
a:hover {
text-decoration: none;
color: #f5c439;
}
a:active {
text-decoration: none;
color: #f5c439;
}
.green-times {
font-family: "times new roman", times, serif;
color: #6fa408;
}
#main-content {
width: 100%;
margin-right: 5em;
margin-left: 5em;
margin-top: 15em;
margin-bottom: 0em;
font-family: Arial, Verdana, "sans serif";
}
#header {
position: absolute;
margin-top: 0em;
margin-right: 5em;
margin-bottom: 0em;
margin-left: 5em;
padding: 0px;
width: 90%;
height: 150em;
font-family: "Times New Roman", Times, serif;
color: #6fa408;
font-weight: bold;
text-align: right;
}
div.menu{
position: absolute;
margin-top: 170px;
margin-right: 5em;
margin-bottom: 0px;
margin-left: 5em;
font-family: Arial, Verdana, "sans serif";
color: #6fa408;
font-weight: bold;
}
#footer{
margin-top: 0;
margin-right: 5em;
margin-bottom: 5em;
margin-left: 5em;
clear: both;
height: 5%;
font-size: xx-small;
font-family: Arial, Verdana, "sans serif";
}
.green-arial {
color: #6fa408;
font-family: Arial, Verdana, Helvetica, "sans serif";
}
div.main {
width: 100%;
margin-right: auto;
margin-left: auto;
}

__________________________________________

My html, stripped (I replaced text with <--!text--> and images with <--!image-->, specific urls with "URL" etc. The weird looking menu is to have a horizontal css menu--and it seems to be working in all the browsers I've tested (thankfully).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title> <--!text--></title>
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
<link href="cssmenu.css" type="text/css" media="all" rel="stylesheet">
</head>
<body>

<div id="header"><a href="http://www.URL.com"><img alt="logo-100 (25K)" src="logo-100.JPG" align="left" border="0" height="103"></a><a href="http://www.URL.com">
<h1 class="green-times"><--!text--></h1>
</a>
<h2 class="green-times"><a href="http://www.URL.com"><--!text--></a></h2>
<h3 class="green-times"> <a href="http://www.URL.com"><--!text--></a></h3>
</div>

<!-- ########################## <--!text--> Menu ########################## -->
<div id="menu-center">
<div class="menu">
<ul>
<li><a href="/index.html">¦ Home<!--[if gt IE 6]><!--></a>
&nbsp;<!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<ul>
<li><a href="/testimonials.html">¦
Testimonials &nbsp;<!--[if gt IE 6]><!--> </a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<ul>
<li><a href="/URL.html">¦ <--!text--> &nbsp;<!--[if gt IE 6]><!--> </a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<ul>
<li><a href="/URL.html">&nbsp;¦<--!text--> &nbsp;<!--[if gt IE 6]><!--> </a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<ul>
<li><a href="/URL.html">&nbsp;<--!text--></a></li>
<li><a href="/URL.html">&nbsp;<--!text--></a></li>
<li><a href="/URL.html">&nbsp;<--!text--></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul>
<li><a href="/faq.html">¦ FAQ &nbsp;<!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<ul>
<li><a href="/URL.html">¦ <--!text--> &nbsp;<!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<ul>
<li><a href="/URL.html">&nbsp;
<--!text--></a></li>
<li><a href="/URL.html">&nbsp;
<--!text--></a></li>
<li><a href="/URL.html">&nbsp; <--!text--></a></li>
<li><a href="/URL.html">&nbsp;
<--!text--></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul>
<li><a href="/contact-us.html">¦ Contact Us ¦<!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<ul>
<li><a href="/about-us.html">&nbsp;
About Us</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<!-- close "menu" div -->
<hr style="display: none;"><!-- close the "minwidth" wrappers --><!-- ###################### END OF MENU ###################### --></td>
</div>

<div id="main-content">

<h1 style="text-align: center;"> <--!text--> </h1>

<P class="green-arial"> <--!text--> </p>

<h2 style="text-align: center;"><--!text--></h2>

<P><--!text--></P>

<img alt="<--!text-->(39K)" src="/<--!text-->.jpg" height="267" width="409">
<br />
<br />
<br />
<p><--!text--></p>
<br />
<img alt="<--!text--> (30K)" src="/IMAGE.jpg" height="376" width="284"><br>
</center>

<p><--!text--></P>

<P><--!text--></P>

<P>
<a href="/URL.html">Read
...</a> <--!text-->.</P>

</div>

<div id="footer">© Copyright 2009 <a href="/index.html"><--!text--></a>,
Inc.<br />
For more information, feel free to <a href="/contact-us.html">contact
us</a>.</div>

</body>
</html>

[raindew01]

What it's doing in other browsers:
In Opera, the yellow border on the left and right doesn't start until the top of the content (below the menu and the header). AND the page is too wide; there's a scroll bar along the bottom. AND the text overlaps the yellow border on the right. And then there's a big gap of white space nothing at the bottom after the footer (with nothing, including no border, which at least is good).

In FireFox: There's a gap where the header should be, and the header and menu are moved down over top of the content. The yellow borders start there, below the white space, where all the text is overlapping. And then there's also a big gap of white space at the bottom, too, below the header (again, no border or anything).

[raindew01]

I was trying to go from px to em, because I read that we shouldn't use px, it's constraining etc. I didn't understand em at first, but I just realized that was causing part of the problem. I've got it a bit better now, but it's still not right:

}
#main-content {
width: 90%;
margin-right: 5em;
margin-left: 5em;
margin-top: 16em;
margin-bottom: 0em;
font-family: Arial, Verdana, "sans serif";
}
#header {
position: absolute;
margin-top: 0em;
margin-right: 5em;
margin-bottom: 0em;
margin-left: 5em;
padding: 0em;
width: 90%;
height: 10em;
font-family: "Times New Roman", Times, serif;
color: #6fa408;
font-weight: bold;
text-align: right;
}
div.menu{
position: absolute;
margin-top: 13em;
margin-right: 5em;
margin-bottom: 0em;
margin-left: 5em;
font-family: Arial, Verdana, "sans serif";
color: #6fa408;
font-weight: bold;
}
#footer{
margin-top: 0;
margin-right: 5em;
margin-bottom: 5em;
margin-left: 5em;
width: 90%
clear: both;
height: 5%;
font-size: xx-small;
font-family: Arial, Verdana, "sans serif";
}

[raindew01]

And then I saw that I wasn't using the
"div.main {
width: 100%;
margin-right: auto;
margin-left: auto;
}"

at the bottom, so I took it out. Now it looks even better in IE. But still not right in the others.

[raindew01]

But, taking that out got rid of the big white gap at the bottom.

[g1smd]

You have a Quirks Mode DOCTYPE. Add the DTD URL to fix that.

The HTML can't validate.

You have a heading H1 inside a link. You need the link to be inside the heading.

The tables inside list items, and even spanning them at the wrong nesting level, bother me a lot (even if they are in conditional IF[IE] statements). I really can't see that working.

Don't link to "/index.html", link to just "/" to avoid Duplicate Content issues with your site.

[raindew01]

g1smd, thank you for your response. I can't believe I missed something like a heading inside a link; yikes! Thank you for catching that. And thank you for the tip to just link to "/".

Um--what is a DTD URL?

[jbinbpt]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

see Recommended list of DTDs [w3.org]

[jbinbpt]

This is causing you problems

body {
width: 100%;

change it to 90%

[raindew01]

Thank you, jbinbpt.

I fixed the DTD url, and the H1 inside a link. The site still looks the same....

[raindew01]

Thank you, jbinbpt. I changed the body percentage. Now it's more centered. BUT the header and menu are still above the rest of it in Opera. (I also put the left and right margins back to auto for the header and menu, because they were too far to the right), and the yellow borders still start at the top of content.

In FireFox, there's still a big white gap at the top where the header should be, and then the yellow border and everything starts below, with the header and menu overlapping....

[jbinbpt]

Have you tried taking all the conditionals out? It's very hard to read with all that there.
<snip>

[edited by: swa66 at 3:28 pm (utc) on Mar. 24, 2009]
[edit reason] Keep the discussion in the forum please. [/edit]

[jbinbpt]

Have you tried taking out the conditionals? They could be causing issues.

[raindew01]

Thank you, jbinbpt, for replying. Um--what are conditionals?

[raindew01]

Got it - the IF IE5 stuff. Yes!

[raindew01]

Thank you so, so much. Taking out the conditionals helped SO much! Thakn you, thank you, jbinbpt. :)

[raindew01]

I've almost got this page exactly as I wanted it. Thank you so much!

I'm just still having trouble with a few things.

I want the content to move down, so it's not so close to the menu. I thought that increasing the em from the top margin would do that:
}
#main-content {
width: 90%;
margin-right: auto;
margin-left: auto;
margin-top: 18em;
margin-bottom: 0em;
font-family: Arial, Verdana, "sans serif";

(from 16em to 18em) BUT it only moves it in IE (and it's too far down); in FireFox and Opera, it looks the same.

I also want to center the menu. I *thought* that having the left and right margins be at auto would center the menu, but it starts out on the left....
}
div.menu{
position: absolute;
margin-top: 10em;
margin-right: auto;
margin-bottom: 0em;
margin-left: auto;
font-family: Arial, Verdana, "sans serif";
color: #6fa408;
font-weight: bold;
width: 94%;

Would you know how to fix those things?