float left with block to right leaves gap in IE6

[Rumba]

Hey all, I've got a little problem... I imagine it should be pretty common
though I could not find an answer via google.

What I'm after is a static left nav with a fluid main content to the right
that expands to fill the remaining browser window.

Take a look at this page in both FF and IE6:
http://www.roagie.com/layout.php

in FF: sections 3 and 4 are butted right up against each other
In IE: there is a noticeable gap between sections 3 and 4

If I assign float:left to section 4, it butts up nicely, but then it doesn't
auto-expand to the take the remaining browser width.

Any help GREATLY appreciated... I've been beating my head against the desk
for a day on this.

P.S. There is also another variation of this problem on that page... the
sections butt up, but the image & text is not flush against the left side as
it is with FF.

[Gus Richter]

Rumba wrote:

Hey all, I've got a little problem...

<http://www.positionise verything.net/explorer/threepxtest.htm l>

--
Gus

[Roagie]

>Hey all, I've got a little problem...

>
<http://www.positionise verything.net/explorer/threepxtest.htm l>

It doesnt' seem to be the 3px issue because the two divs have heights
assigned to them.

[dorayme]

In article <1P************ ******@newsfe06 .phx>,
"Roagie" <no*****@man.co mwrote:

Hey all, I've got a little problem...

<http://www.positionise verything.net/explorer/threepxtest.htm l>

It doesnt' seem to be the 3px issue because the two divs have heights
assigned to them.

I don't think this is a good reason to doubt it. You are perhaps
confusing it with another issue.

It is a pesky business assigning heights anyway in a real webpage
that has a left floating nav and right content. You will lose
flexibility.

There are a number of ways of tackling your problem. The simplest
and best is to stop worrying about the content butting up so
exactly. Give the left nav a width and the right (non-floated)
content div at least a left-margin as wide as the float. If you
design so it still looks nice with a bit more margin, then it
will not look so different in IE which does add the 3px gap.

But if you really insist on butting up, then one way to do it is
to tell IE that the the left margin to the static content is 3px
less than the width assigned to the float. And you can do this in
a number of ways, via a * hack in your css sheet, or a
conditional construction in your html that only IE notes. In the
case of the latter you can refer IE to a different stylesheet.

If you use a float, float construction (which is not for you
really because you want to let the content expand), there is a
way to cope with the gap in IE by giving the right float a neg
margin (for IE eyes only via css hacks or conditionals).

--
dorayme

[Roagie]

There are a number of ways of tackling your problem. The simplest

and best is to stop worrying about the content butting up so
exactly.

It's a sliced up graphics kinda layout, so the images that serve as the div
background-images must butt up.

Give the left nav a width and the right (non-floated)

<helpful suggestions snipped>

Thanks for all your suggestions, but in the interest of cross-browser
compatibility and time I just created a skeleton using a table, and am using
css inside each table cell. To me it just didn't make sense to try all these
css hacks to get the browsers to agree... if you have to hack css so much
for complex layouts, then it's simply not ready for complex layouts (some
layouts may be ok, but for complex stuff like I'm trying to do... no dice).
I understand it's not css' fault, it's the browsers'. But it is what it is.
I solved my problem with a simple table layout in 1 minute, compared to the
3 hours I had already wasted trying to get it to work with divs, and
probably much more time had I attempted to slug it out with css hacks.

[dorayme]

In article <1w************ *****@newsfe07. phx>,
"Roagie" <no*****@man.co mwrote:

There are a number of ways of tackling your problem. The simplest
and best is to stop worrying about the content butting up so
exactly.

It's a sliced up graphics kinda layout, so the images that serve as the div
background-images must butt up.

Give the left nav a width and the right (non-floated)

<helpful suggestions snipped>

Thanks for all your suggestions, but in the interest of cross-browser
compatibility and time I just created a skeleton using a table, and am using
css inside each table cell. To me it just didn't make sense to try all these
css hacks to get the browsers to agree... if you have to hack css so much
for complex layouts, then it's simply not ready for complex layouts (some
layouts may be ok, but for complex stuff like I'm trying to do... no dice).
I understand it's not css' fault, it's the browsers'. But it is what it is.
I solved my problem with a simple table layout in 1 minute, compared to the
3 hours I had already wasted trying to get it to work with divs, and
probably much more time had I attempted to slug it out with css hacks.

I understand and sympathise. Good luck.

--
dorayme