Because there is no MAX-Width in IE...?

[jacobpressures]

What I've been trying to do is center a block of text in a div. The text itself is aligned left, but the <p>, <ul>, <div> in which the text reside is actually in the middle of a parent div.

It is like putting all the items in a cardboard box on the left side (of the box). The items in the box are not centered in the box but are on the left side. The box however is not on the left side of the room but in the center. So the position of the box to the walls of the room is the middle or center. the position of the items in the box are against the left wall of the box.

That way my text looks normal (left-aligned) but it is moved to the center of the parent div. This would be best if i could use max-width because i wouldn't have to worry about short paragraphs or lists appearing uncentered.

I'm guessing this can't be done without using some type of hack?
Can it be done somehow without margins?
My only concern about hacks is that they become obsolete then I'll have to figure out why my pages don't work.

Thanks!

[hannson]

Hi, try giving the element you want to center a margin of a 0 auto ( margin: 0 auto; )

This will workin all but IE i think.
edit: margin: 0 auto works in standards compliance mode in IE


for IE support you need to use tables

final output I use:
<table border=0>
<tr>
<td class="centered">
<div class="centered"> Centered content here </div>
</td>
</tr>
</table>

td.centered {
text-align: center;
}

.centered {
position: relative;
margin: 0 auto;
text-align: left;
}


Just place the table and maybe you need to set the width and height to equal of the parent

[briansol]

Please post your code. It's hard to give advice without seeing what you're working with. Tables are NOT the answer.

[hannson]

Although I agree with briansol I know no other way to do this

[Scuba Addict]

Try this in your css:

max-width:955px; width:expression(document.body.clientWidth > 955? "955px": "auto" );

[Paul O'B]

My only concern about hacks is that they become obsolete then I'll have to figure out why my pages don't work.

Only use hacks that target dead browers and they will never become obsolete. Don't hack for modern browsers as most don't need them anyway. * html is 100% safe for ie6 and under because ie7 doesn't support it and doesn't need it. (Or Use conditional comments of course).

There ie virtually no need to hack for any other browser apart from ie.

Try this in your css:

max-width:955px; width:expression(document.body.clientWidth > 955? "955px": "auto" );

You first have to determine what mode the browers is working in otherwise this could crash it. If ie is in quirks mode it needs a different format to standard mode.

a min and max width expression.

<!--[if gte IE 5]>
<style type="text/css">
#wrapper {width:expression(
(d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) &&
(d.clientWidth > 1024 ? "1024px" : d.clientWidth < 770 ? "770px" : "auto"));
}
</style>
<![endif]-->

This would be best if i could use max-width because i wouldn't have to worry about short paragraphs or lists appearing uncentered.

You lost me there lol. I don't see what max-width has to do with centering things.

You probably need to post a code example of what you have got so that we can give specific answers

[Jacob2003]

Here is one of my pages. Almost all the links work. There are many pages like this one. http://www.wingfling.org/wingfling/donations.htm

Anything that has text-aligned left is aligned to the left itself. I only want the text to align to the left and not element enclosing the text.

Here are my content div code below.

#content {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
MIN-HEIGHT: 100%;
FLOAT: left;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 11px 0px 30px 10px;
WIDTH: 617px;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #fff;
TEXT-ALIGN: center;
BORDER-RIGHT-WIDTH: 0px
}


#content LI {
WIDTH: 290px;
COLOR: #000;
TEXT-ALIGN: left
}

In my opinion centering the box is different from aligning the text within the box.

Thanks!

[Paul O'B]

Hi,

Here is an example using different kinds of centering which I think covers all the points you were making.

There are elements and blocks of unspecifed width which are centred. The text within the blocks can be aligned left, right or centre as required.

There are block level elements centred in the normal way also just for comparison.

http://www.pmob.co.uk/temp/centre-no-width5.htm

Hope it was what you wanted

[jacobpressures]

That looks EXACTLY like what i want!

Thanks Paul!