<div> float:right driving me crazy

Hi

http://89.249.160.112/dev/test.html

Firefox/2.0.0.11, Opera/9.22

Whatever I try I just cannot get the content div to render hard right,
there is always that little bit of the header overhanging ...

IE/7.0.5730.11, IE/6.0.2900.2180

I can live with the fact that the content is not centred to begin with
but this looks ... rubbish, and what has happened to the right hand
border of the header.

What I would like to see is the header with all of it's border.
Beneath this I would like to see the nav div hard left and the content
div hard right with a 1em space in between. Using em is quite important
as I'd like the site to scale well, I'm amazed at he number of
professional looking site that fall to bits when
you <ctrl> + and <ctrl> - in Firefox (and others)

Any help much appreciated

Thanks
Duncan

On 2007-12-21, lyallex <lyallex (AT) gmail (DOT) com> wrote:

Hi

http://89.249.160.112/dev/test.html

Firefox/2.0.0.11, Opera/9.22

Whatever I try I just cannot get the content div to render hard right,
there is always that little bit of the header overhanging ...

Lose the width: 50em on <div id="header">.

Its auto width is what you want: the width of #root's content area,
which is slightly less than 50em on account of #root's borders.

If you set it to 50em, it overflows its container by a couple of pixels.
But the right float (whose containing block is also #header) goes to the
right of its container without overflowing. That's why it's 2px further
left than #header.

IE/7.0.5730.11, IE/6.0.2900.2180

I can live with the fact that the content is not centred to begin with
but this looks ... rubbish, and what has happened to the right hand
border of the header.

Perhaps they're not drawing it because it overflowed. If you're lucky
losing that 50em will fix this too, but with IE all bets are off.

Ben C wrote:

On 2007-12-21, lyallex <lyallex (AT) gmail (DOT) com> wrote:
Hi

http://89.249.160.112/dev/test.html

Firefox/2.0.0.11, Opera/9.22

Whatever I try I just cannot get the content div to render hard right,
there is always that little bit of the header overhanging ...

Lose the width: 50em on <div id="header">.

Yep, that does the trick for all tested browsers, however I still have a
problem with IE overlapping the content and nav bar divs but I can get
around that by reducing the width of the content div.

Thanks for taking the time to reply (and solving the problem of course).

Duncan

lyallex wrote:

http://89.249.160.112/dev/test.html

I still have a
problem with IE overlapping the content and nav bar divs

The lack of DOCTYPE triggers quirks mode, so IE uses a broken box model.
http://www.cs.tut.fi/~jkorpela/quirks-mode
http://hsivonen.iki.fi/doctype/
http://brainjar.com/css/positioning/

Use HTML 4.01 Strict if you expect consistency across browsers.

but I can get
around that by reducing the width of the content div.

Probably not.

--
Berg