Floating in problems...

Can't get images, text and borders to behave

[Psalm91]

I have a two column page (nav and body). The body has a 1 px left border running to separate the two areas.

<div class="main">
...
</div>
<div class="nav">
...
</div>

In the main section, I have smaller sections which contain text with a right floated image. If the amount of text was too short to surround the image, the image would extend down into the next section. drbrain suggested I use the clear:both; after the image (wich I put in the section title) and it worked like a charm.

Except... now in IE6, that nice little border that separates the nav and main pushes its way to the left edge of the browser if the image exceeds the text. If the text exceeds the image, it positions back to the correct location.

I tried the page under NS7 and it works fine.

In the main area:

<div style="clear:both;">1st Section</div>
<img ... style="float:right;">
<p>
...text
</p>
<div style="clear:both;">2nd Section</div>
<img ... style="float:right;">
<p>
...text
</p>

Does anyone know if this is a bug in IE and if there is a workaround?

[BlobFisk]

Have you tried adding display: block to the two images?

[Psalm91]

That did it - thanks BlobFisk! Can you give a brief summary as to why, or was this just one of the tricks up your sleeve?

[BlobFisk]

Hey Psalm91,

My feeling was that <img>'s are inline by default, so trying to float them would cause problems. One of the many great things about CSS-2 is that you can redefine an elements display: status to block level.

By changing these images to block level, you allowed the float to work correctly, which wasn't possible which the <img>'s were still inline elements.