Centering the entire page

[ColinM]

Well, heh. It's me again, from Hogwartsradio.com with another question. It's kind of trivial, but several people have asked about it.

As you can see on the site, the entire page is on the left, and then you have the background going off on the right side. What do I need to change so that it's centered in the page, no matter what the person's browser size is? You know, so there's equal amount of background on both sides.

 

[angelwatt]

The way to center something like a div tag is to give it the CSS property: margin: 0 auto; The auto is the trick, which is applied to the left and right side. The problem on your site is you're currently using absolute positioning for the main div and the margin property doesn't really much in this case. You have to remove the absolute positioning for the main div, which means you'll also have to rework some of the other CSS since it has a cascading effect.

Edit: Here's a quick fix, add a div around everything with an id of "all." Then, add the CSS below and tada, at least it worked in Firefox, but should work in others as well.

<div id="all">
... everything inside body tag currently here ...
</div>

#all {
 position: relative;
 margin: 0 auto;
 width: 950px; /* chosen because that's the width of the header image */
}

 

[gamera~]

Am I mistaken in thinking IE 5 and 6 don't center divs with margin: auto and something such as text-align: center in an enclosing div is needed?

The way to center something like a div tag is to give it the CSS property: margin: 0 auto; The auto is the trick, which is applied to the left and right side.

 

[Melrose]

Am I mistaken in thinking IE 5 and 6 don't center divs with margin: auto and something such as text-align: center in an enclosing div is needed?

I've never encountered that with IE6 - I don't remember whether that was the case with IE5/5.5 or not.

In the case of the margin:0 auto; option, you have to make sure you set an actual width for the element. If it's liquid it won't work (since there are no margins, obv)

 

[gamera~]

I've never encountered that with IE6 - I don't remember whether that was the case with IE5/5.5 or not.

Ah, here it is. I guess it only affects IE 6 in "backwards-compatible" mode.

http://13thparallel.com/archive/margin-fix/

In Internet Explorer 5.x and backwards-compatible-mode Internet Explorer 6 on Windows platforms, the automatic horizontal margins are not implemented correctly. Setting the various forms of automatic left and right margins has no effect on the desired element.

I think I was having this issue using a freshly installed version of XP SP2 and IE 6.

 

[angelwatt]

In the case of the margin:0 auto; option, you have to make sure you set an actual width for the element. If it's liquid it won't work (since there are no margins, obv)

Yup, that's why I supplied a width property. For my own stuff I use min- and max-width properties as well while using em measurements for the widths, which allows for a good amount of fluidity. Of course IE doesn't understand min-/max-width properties in CSS, but newer versions are fixing that.

 

[ColinM]

Thanks everybody for your input.

So Angelwatt, I did as you told me to, put a <div id="all"> where right before the body tag, closed it, and then added the code into my style.css. Now the header, it's centered perfectly. However I have a repeating image that extends down through my page, that does not move, and makes it look retched. I've uploaded what it looked like to this post.

Currently I removed the piece of CSS in order for it to currently look normal.

 

[angelwatt]

I did as you told me to, put a <div id="all"> where right before the body tag, closed it, and then added the code into my style.css.

Actually, that div should go right after the starting body tag, not before. That makes it invalid HTML. This may not resolve the issue though, but should be fixed. Something else to do after that would be to clean up some of the HTML errors you have. Run the age through the validator. You may not be able to resolve all 100+ errors that currently exist, but fixing the ones you can will likely help. Post here if you have questions about any errors. The errors may be effecting my fix (a small maybe).

I'll look at the code some more as I have time to see if I manage any other ideas.

Edit: Also make sure the closing div is just before the closing body tag. Just noticed that.

 

[angelwatt]

OK, I downloaded the page, worked it over some, and created a solution. I also went through and fixed all validation errors. Unfortunately, I'm not going to be able to relate those fixes completely since my local version uses different file paths for resources, but it at least shows all errors can be fixed and wasn't that hard to fix the 172-odd errors. See below for suggestions on fixing things.

Anyways though, the main fix for centering. The div and its CSS that I supplied earlier is still in play. In your HTML file, you have near the top inside the head tag a style tag where you have a body selector and apply the background image, which is currently un-centered with the fix. Remove the word left from the end of it. That's keeping it from centering appropriately. Also, that border property does nothing so just delete it.

As far as fixing some of the validation errors. I'm not sure how you work on the site, like what editor, but if you have a text editor we can use the find and replace. Some quick fixes are,

• find: <hr> replace with: <hr />
• find: <br> replace with: <br />
• find: </a></h3> replace with: </h3>
• find: </small> replace with: </small></p>

Some other things to note while making fixes:

• All link tags needs to be inside the head tag.
• If there's JavaScript in the file (not the links to JavaScript files) it's best to place CDATA tags around the code (see below for example).
• Use ul tags when you have li tags.

CDATA example:

<script type="text/javascript">
//<![CDATA[
JavaScript code here;
//]]>
</script>