problem with floats and centering

Forum Moderators: not2easy

Message Too Old, No Replies

problem with floats and centering

danny

11:22 am on Jan 9, 2007 (gmt 0)

I have a lot of pages that are centered single columns of text, implemented with "width: 34em; text-align: left; margin: 0 auto;". Sometimes I want to put something to the left or right of those, which I've been doing using a floated div preceding the text column. This works fine in Firefox, but not in Internet Explorer, where the column is no longer centred on the page.

The following code shows the problem.

<div style="float: right; border: solid 2px red;">
this is an ad<br>or something like that
</div>
<div style="width: 34em; text-align: left; margin: 0 auto;">
<h1 style="text-align: center;">This is the page heading</h1>
<p>
This is the main body of text, which I want to be a column of text 34em wide, centered on the page. Blah, blah, blah, blah, blah, blah.
</div>

Is there any straightforward way to fix this? -- I want the appearance in IE to be like the appearance in FF.

alfaguru

6:08 pm on Jan 9, 2007 (gmt 0)

Here you go:


<div style="position: absolute; top: 0; right:0; border: solid 2px red;">
this is an ad<br>or something like that
</div>
<div style="width: 34em; position:absolute; left: 50%;margin-left:-17em;">
<h1 style="text-align: center;">This is the page heading</h1>
<p style="text-align:left;">
This is the main body of text, which I want to be a column of text 34em wide, centered on the page. Blah, blah, blah, blah, blah, blah.
</div>

Fotiman

7:53 pm on Jan 9, 2007 (gmt 0)

The problem with alfaguru's approach (as with many absolute positioning approaches) is that the content might overlap. Personally, I would avoid using absolute positioning like this.

cmarshall

9:24 pm on Jan 9, 2007 (gmt 0)

I've had the same issue. I think that IE takes widths a bit too seriously. I'd have to go back over my notes for it, but I seem to remember that I had to make the total width of the <div> tags to be 99%, not 100%.

cmarshall

9:39 pm on Jan 9, 2007 (gmt 0)

The following code worked for me in every browser I tested:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<div style="float: right; border: solid 2px red;">
this is an ad<br>or something like that
</div>
<div style="width: 34em; text-align: left; margin: 0 auto;">
<h1 style="text-align: center;">This is the page heading</h1>
<p>This is the main body of text, which I want to be a column of text 34em wide, centered on the page. Blah, blah, blah, blah, blah, blah.</p>
</div>
</body>
</html>

Notice that I always wrap my examples in valid DOCTYPE tags. This can make a HUGE difference in exactly the type of issue that you are having.

danny

2:51 am on Jan 11, 2007 (gmt 0)

cmarshall, I tried your exact page - copy and paste - and it's not doing what I want in IE6 or IE7. I want the column centred on the page, ignoring (unless there's an overlap) the floated box.

(And yes, the danger of overlaps is the reason I don't want to use absolute positioning here.)

cmarshall

3:28 am on Jan 11, 2007 (gmt 0)

Ah... Now I get it.

Sounds like you need a Z-index solution.

danny

3:58 am on Jan 11, 2007 (gmt 0)

Alternatively, I'd be happy if the boxed DIV were juxtaposed to the page-centred central column. In Firefox I can do that using negative margins as appended, but that doesn't work in IE.


<div style="width: 34em; text-align: left; margin: 0 auto;"><div style="width: 120px; float: right; margin-right: -120px; border: solid 2px red;">this is an ad or something like that</div>
<h1 style="text-align: center;">This is the page heading</h1><p>This is the main body of text, the exact layout can be negotiated,
but it must also be well-formed and grammatical, and must not consist
of artificial strings of keywords. </p>
</div>

cmarshall

11:15 am on Jan 11, 2007 (gmt 0)

I take it the ad must be the first <div> for SEO purposes?

If it were after the content, it wouldn't be difficult to get what you want.

I can play around with it later.

danny

11:38 am on Jan 11, 2007 (gmt 0)

No, the adbox can go after the center column, that's no problem. The solutions I tried with that fail with overlaps when the page width shrinks, though.

I just did some checking and the negative-margin solution (with the adbox *inside* the centre column) works in IE7. It fails badly in IE6, though, so that's not an option unless there's a fix.