fifeclub — Thu, 10 Feb 2005 04:25:26 +0000

that did it. awesome awesome awesome! Thanks yet again.

Renegade — Wed, 09 Feb 2005 10:56:01 +0000

add display:block; to .center

fifeclub — Wed, 09 Feb 2005 04:29:53 +0000

andy206uk wrote: To center things in IE you have to use "text-align: center" applied to the surrounding div or if it's the outer most div, on the body tag. This is another one of those "ie not working properly things". To center in standards compliant browsers you set the left and right margin's to "auto".

Using inline styles (yuk!) here's an example that should work across the board:

<body style="text-align: center;"> <div style="margin: 0 auto 0 auto;"><p>Content</p></div> </body>
'

Please note, if you set the outer element to text-align: center the effect with cascade and effect the inner element as well, so you need to add text-align: left to the inner div to correct that.

Sorry to bring back an old thread but I'm still having this centering issue, but with a different section. Your solution seemed to work on my previous issue but now I'm just tying to center a plain simple image.

On this page I'm just trying to center the drawing image of homes at the bottom. At first I did it inline but then I tried making the css external so that I can use it over and over again. I've tried just one, then just the other, now both and nothing works in either IE or FF.

.center {text-align: center; margin: 0 auto 0 auto;}'
<img src="/development/graphics/drawing.jpg" width="600" height="125" alt="" class="center" />'

AyntRyte — Fri, 28 Jan 2005 13:16:42 +0000

I must admit to a boo-boo in my code above. Class must be used instead of ID, as ID is unique and can only be used once. :blush:

andy206uk — Fri, 28 Jan 2005 09:15:05 +0000

To center things in IE you have to use "text-align: center" applied to the surrounding div or if it's the outer most div, on the body tag. This is another one of those "ie not working properly things". To center in standards compliant browsers you set the left and right margin's to "auto".

Using inline styles (yuk!) here's an example that should work across the board:

<body style="text-align: center;">
  <div style="margin: 0 auto 0 auto;"><p>Content</p></div>
</body>

Please note, if you set the outer element to text-align: center the effect with cascade and effect the inner element as well, so you need to add text-align: left to the inner div to correct that.

fifeclub — Fri, 28 Jan 2005 05:45:31 +0000

DIFFERENT QUESTION:

I don't want to clog up the forums with lots of threads so I'm going to ask another (yet different) css question here. I used the code above here to make the vertical boxes which worked great. All of that code is contained in an overall content container div, appropriately named "container". Now I want to center my container div but I just discovered that XHTML does not support . So seperately I tried the css code of text-align:center and the html code of align="center". Both solutions (either together as they are now or seperately) work fine in Internet Explorer but not in Firefox. :eek: (Isn't it usually that things work in FF but not IE) Anyway, since I can't use and the two workarounds don't work in FF, what else can I do to center my container div and still validate, or any content that I may need to center in the future?

Thanks yet again.

fifeclub — Fri, 28 Jan 2005 04:24:05 +0000

That was easy. Thanks!

Renegade — Thu, 27 Jan 2005 09:31:08 +0000

Or, you can give it a width and make it display:inline;

AyntRyte — Thu, 27 Jan 2005 05:00:12 +0000

Try this?

<div style="float:left; border: black solid 1px; padding:5px">whatever</div>
<div style="float:left; border: black solid 1px; padding:5px">whatever</div>
<div style="float:left; border: black solid 1px; padding:5px">whatever</div>
<div style="float:left; border: black solid 1px; padding:5px">whatever</div>