IE's behavior when a div is too small for an image

and there is a float next to it

[misha]

Hi,

I'm wondering if anyone knows what is causing this behavior:

When a containing div is smaller than an image it contains, and there is a floated div next to it, IE kicks the image below the div, instead of simple adding horizontal scrolling.

Drag the window smaller than the image.

<div name="sidebar" style="float:left; width: 150px; border: 1px solid #000;">
<p>Sidebar Menu</p>
<p>Menu1</p>
<p>Menu2</p>
<p>Menu3 </p>
</div>
<div name="main" style="margin-left: 165px;">
<img width="600" height="200" border="1">
</div>

Any idea why this behavior, and how I can stop it (short of min-width)?

Misha

[Condor12]

Hi misha,

Try putting the two divs within a containing div with a width
ie.

<div style="width: 770px;"><div name="sidebar" style="float:left; width: 150px; border: 1px solid #000;">
<p>Sidebar Menu</p>
<p>Menu1</p>
<p>Menu2</p>
<p>Menu3 </p>
</div>
<div name="main" style="margin-left: 165px;">
<img width="600" height="200" border="1">
</div></div>

Condor12

[misha]

Yeah that would prevent the problem, but I want to keep the page liquid.

I don't know why IE is acting this way when the image is larger than the div; other browsers kick the image out of the div to the right (and I'd prefer if they acted like tables, containing the image completely, and not shrinking past the width of the image).

Misha