Previous Message
Next Message

IE issue - DIV's not going full width

Sent by Ingo Chao on 15 May 2005 22:10

Jonathan Duncan schrieb:
> Thank you Ingo, the position:relative at least got the logo and nav
> to align to a different div which makes them closer to being in the
> center.  However I am also trying to get them to stretch out to fill
> the whole page horizontally.  These two div have no width that I can
> see and they are not being limited by anything that I can tell so I
> would think they should expand to fill the screen like they do in
> Firefox.  Any ideas why they do not?
> Jonathan

Jonathan, I've tried to isolate a rough approximation of the problem, as
I understand it, but I may be wrong.

Note the slight difference in Op+IE versus FF.

[ for those who still believe in code snippets on css-d:

body { margin: 0 auto; width: 250px; border:5px solid blue; padding:0;

#p-logo { background-color: red; position: absolute; top: 0; left: 0;
right:0; height: 40px; }

#p-logo a { display: block;width: 100%;   }

   <div id="p-logo"><a href="#">Logo</a></div>

In your example, the parent has the same width as body, not shown in my
test case. The current ancestors of a. p. #p-logo aren't positioned.

I was wrong in my earlier post, sorry.  Op, IE, FF are indeed
positioning with respect to the containing block, and that's <html>, not
<body> (offset top:0 left:0; starts at the same location).

So where is the bug?

AFAIK, the block level link gets 100% from its parent of width auto,
therefore, #p-logo should gain 100% of the width of its containing block.

But Opera8.01 and IE6 share the same bug: the do offset an absolute
positioned element with respect to the containing block, yes, but do
calculate a percentage width with respect to the parent (=body in your

But what if the parent is not the ancestor?
That's still CSS1.

IMHO, the bug cannot be fixed without structural changes to your code.

As you can't take the logo out of <body></body> to prevent the
relational bug, you'll have to move the centering for body to another
page wrapper, and take the logo out:

[again a snippet

But that will not be fun to do within your complex page.

I would love to hear other opinions concerning your problem on this list.


css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: