Right-floating in IE

[dave_nul]

Hello. I'm noticing strange behavior in the way that Internet Explorer
positions elements following an element that has been floated to the
right.
Here is a simple test:
<div style="width: 800px; background-color: #CEF;">
<div style="width: 200px; float: right; background-color:
#FF0;">width: 200px; float: right; background-color: #FF0;<br />
width: 200px; float: right; background-color: #FF0;<br />
width: 200px; float: right; background-color: #FF0;</div>
<p>Unstyled text. Unstyled text. Unstyled text.</p>
<div style="width: 600px; background-color: #F66;">width: 600px;
background-color: #F66;<br />
width: 600px; background-color: #F66;<br />
width: 600px; background-color: #F66;<br />
Firefox and Opera correctly float this div up below the unstyled
text. Internet Explorer pushes it below the div floated to the
right.</div>
</div>

It looks great in Firefox and Opera, but Internet Explorer (I'm using
version
6.0.2800) pushes the element down below the right-floated one.

If someone has seen this problem before and has an idea of what I could
be
doing wrong, I would appreciate input. Thanks!

[Neredbojias]

To further the education of mankind, da******@hotmail.com vouchsafed:

Hello. I'm noticing strange behavior in the way that Internet Explorer
positions elements following an element that has been floated to the
right.
Here is a simple test:
<div style="width: 800px; background-color: #CEF;">
<div style="width: 200px; float: right; background-color:
#FF0;">width: 200px; float: right; background-color: #FF0;<br />
width: 200px; float: right; background-color: #FF0;<br />
width: 200px; float: right; background-color: #FF0;</div>
<p>Unstyled text. Unstyled text. Unstyled text.</p>
<div style="width: 600px; background-color: #F66;">width: 600px;
background-color: #F66;<br />
width: 600px; background-color: #F66;<br />
width: 600px; background-color: #F66;<br />
Firefox and Opera correctly float this div up below the unstyled
text. Internet Explorer pushes it below the div floated to the
right.</div>
</div>

It looks great in Firefox and Opera, but Internet Explorer (I'm using
version
6.0.2800) pushes the element down below the right-floated one.

If someone has seen this problem before and has an idea of what I could
be
doing wrong, I would appreciate input. Thanks!

Welp, I tried my best, but I just can't visulaize it. Sorry.

--
Neredbojias
Infinity has its limits.

[feed_sheep]

da******@hotmail.com wrote:

Hello. I'm noticing strange behavior in the way that Internet Explorer
positions elements following an element that has been floated to the
right.
Here is a simple test:
<div style="width: 800px; background-color: #CEF;">
<div style="width: 200px; float: right; background-color:
#FF0;">width: 200px; float: right; background-color: #FF0;<br />
width: 200px; float: right; background-color: #FF0;<br />
width: 200px; float: right; background-color: #FF0;</div>
<p>Unstyled text. Unstyled text. Unstyled text.</p>
<div style="width: 600px; background-color: #F66;">width: 600px;
background-color: #F66;<br />
width: 600px; background-color: #F66;<br />
width: 600px; background-color: #F66;<br />
Firefox and Opera correctly float this div up below the unstyled
text. Internet Explorer pushes it below the div floated to the
right.</div>
</div>

Forgive the poor explanation, but when you have the two inner widths adding
up to the exact width of the outer container, IE tends to do this. Change
the div with the 600px width to 598px or so.

David

[Jim Moe]

da******@hotmail.com wrote:

Hello. I'm noticing strange behavior in the way that Internet Explorer
positions elements following an element that has been floated to the
right.

<div style="width: 800px;">
<div style="width: 200px; float: right;
<div style="width: 600px; ">

IE requires a bit if extra space around the <div>s (bogus feature). Make
the internal divs a little smaller, or the outer one larger.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)