browser compatibility issue

[Corona]

I have some CSS that behaves perfectly in Firefox but not in IE 6.x. I'm
hoping someone has a suggestion to fix the problem.

This is the CSS i'm using:

..content {
position:relative;
margin-left:10%;
margin-right:10%;
width:80%;
background-color:#66CCFF; /* debug */
border-right:2px solid #B69C2F;
border-left:2px solid #B69C2F;
}
..leftNavColumn {
margin-left:0;
float:left;
padding:0;
border-right:4px solid #B69C2F;
width:200px;
background-color:#DDDDDD;
}
..mainColumn {
width:100%;
background-color:#99CC00;
}

-------[ HTML ]--------

<div class="contentWrapper">
<div class="content">
<div class="leftNavColumn">
</div><div class="mainColumn">This is a test...</div>
</div>

-------------------------

In Firefox mainColumn takes up 100% of the remainder of its container and
resizes when the container is resized. In IE the same CSS wraps the
mainColumn div to the next line below the leftNavColumn. Does anybody have a
fix for this? I don't really mind too much if the fix breaks the Firefox
implementation because i'm using a browser detection script to implement
browser specific styles.

[fredo]

If I understand your problem, then I'll give you the answer that
Spartanicus gave me.

css:
..clr {clear: both}

html:
<div class="leftNavColumn"></div>
<div class="mainColumn">This is a test...</div>
<div class="clr"></div>

Worked great for me and ended hours of grief.
hth -- fredo

[Corona]

Thank you for the response fredo. However, it had no effect on the output.
The mainColumn div still wraps below the leftNavColumn in IE...

"fredo" <fr***@key-horse.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...

If I understand your problem, then I'll give you the answer that
Spartanicus gave me.

css:
.clr {clear: both}

html:
<div class="leftNavColumn"></div>
<div class="mainColumn">This is a test...</div>
<div class="clr"></div>

Worked great for me and ended hours of grief.
hth -- fredo

[fredo]

Sorry, I didn't look carefully enough. Maybe you'd care to give this a
try:

..mainColumn {
/* width:100%; */
background-color:#99CC00;
}

hth --fredo

[Corona]

Thanks fredo. That looks like it worked. Thought I had already tried that
but i guess not... :)

"fredo" <fr***@key-horse.com> wrote in message
news:11**********************@f14g2000cwb.googlegr oups.com...

Sorry, I didn't look carefully enough. Maybe you'd care to give this a
try:

.mainColumn {
/* width:100%; */
background-color:#99CC00;
}

hth --fredo