heres my current layout im working on: http://www.geocities.com/grace_xox/divtest1.html
i want it to be centered really bad..i've googled it and found a centering code and it didnt work..please help!

For it to work in Internet Explorer, you must add text-align:center; to the body (and text-align:left to the container so the text will not be centered), like this:

body {
text-align:center;
}

#container {
text-align:left;
(what you already have for this selector)
}

Ok thanks so much

erg sorry to double post..but its not showing the edit button? i was just gonna say that the code you gave me didnt work?

If you're talking about the auto left and right margins you are using, it's a perfectly valid way of centering elements horizontally, and works fine in more standards-compliant browsers like Firefox. It will work in IE, but you must force it out of quirks mode into standards mode by using a DTD (Document Type Definition) like XHTML 1.0 Strict.

You can find some methods for centering elements using CSS here: http://www.lissaexplains.com/forum/showthread.php?t=53640#post368538

Here is an example of some methods of absolute positioning, centering included: http://jfweb.fastmail.fm/center/center.htm

P.S. The edit button will only work for 5 minutes after you post, so you may want to speed up a little, or just wait to thank your generous helpers until after you're sure that they know what you're looking for and how to do it. ;)

OK, so good ol' centering revisited.

My layout looks just peachy in FF but, of course, not in IE. Life wouldn't be so much fun without IE, would it.

So I tried the text-align: center for the body technique and all it does is indeed centers everything on the page - EXCEPT for what I want centered. That block sticks to the upper-left hand corner like its life depends on it.

I also read that switching the doctype to strict should make even IE accept the auto margins. Now, I'm a bit fuzzy on this doctype-thing. I haven't quite switched it yet (I'm on transitional XHTML) because I'm not sure if that might make the rest of my pages (different layout) fall over or what kind of consequences it has. Could someone help me out? Thanks.

ETA: So I ventured into the strict doctype and still no centering. If needed, I'll post code but I was just wondering if someone might have some ideas without it. Thanks!

Well, after playing around some, here's what I've got. The particular item (an image) I'm wanting centered is in a div like so:


<div class="main">
<p id="photo"><strong><img src="Image.jpg" alt="Image title" width="640" height="400" /></strong></p>
</div> <!-- main -->


Now I went in and put nice colorful borders around both the class and the id and they are where they're supposed to be. For whatever reason, though, in IE, the photo itself sticks to the upper left-hand side of the browser window. So it's not contained in the div or the class that contains it. Does that make any sense to anyone? Any help would be appreciated, please.

Well, the text-align property will only justify inline-level elements (text, images, <span>, etc.) and only inside the element to which the property is applied. As it's name suggests, it is meant to justify text and you cannot use it to center block-level elements.

As for your DTD, ideally, you should be using a strict DTD all the time (excepting a requirement for frames). You won't find much of a difference from the transitional version, it is just more strict on syntax: you don't have to learn a new language (http://www.w3schools.com/xhtml/xhtml_intro.asp). I can guarantee that using the XHTML 1.0 strict does push IE out of its quirks mode so that auto margins work properly. The element that you're trying to center must be a block-level element, though. Also, you must specify an absolute width for the element, otherwise the browser won't be able to calculate the margins.

So the picture is appearing outside of its borders? Do you have any absolute positioning applied to the image? Once again, boyo, you're gonna need to post a link for that stuff. ;)

Also, I'm curious: why is the image contained within a strong element?

Hi J! I knew you'd come to my rescue. :)

Wow, you wrote a handful. I'll have to digest that a little and I also need to run away for an hour or so but I'll be back and the problem will still be around, too.

Just to answer your 'strong' question:
I have to fess up. This is css I got from an existing page and was trying to tweak it to suit my needs but I'm thinking maybe I should just try to build a (much) simpler version myself because I just can't figure this out. It might be a bit too complex at the moment. The strong, I think, is for a background that ends up as a drop shadow. I think.

Oh and I know, I know, I might put something online soon, I'm just in the middle of switching hosts and redesigning site and I didn't want to load stuff up until I switched. Not making life easy for myself, I know.

Heh, well, if all else fails, curse a little and start from scratch. Then curse some more, just for effect. Just don't do so here or I may have to delete your post. :)

Never fear, I'm not the cursing kinda gal. :)