DIV doesn't expand to hold floated IMG

So can I expand/clear it with a HR?

[martinship]

This topic of DIVs not expanding to hold images (or anything that's been floated) has been well-discussed over in this old thread [webmasterworld.com] from 2004.

I'm trying to do the same thing. Small amount of text. Big floated images. One DIV to hold it all and give it a border and background. Big problems.

I've seen nested DIVs as the "solution" but I'm not really fond of that idea.

I'm designing a widget catalog that displays a picture of the widget on the left with the widget's name and description on the right. I need a separator between widgets anyway, so I added a horizontal rule and styled it. And then I added clear:left; to it. Great! DIV expands properly in Firefox, so the image doesn't hang outside the DIV! So I just add a HR to the bottom of content just above </div> (could even make the HR disappear with the right CSS) and we're all set.

Not so fast. In IE all of the text disappears! If I try to select the area where the text should be, it's there alright. I can see it. But if I deselect it, it disappears again. Any ideas?

Basic code is

#Content {
margin:20px 50px 50px 215px;
padding:20px;
background-color:#e4e9d4;
}

img {float:left;}
hr {clear:left;}

HTML page thusly:

<div id="Content">
<img src="widget.jpg" height="280" width="215" />
<h2>Widget Name</h2>
<p>A short description of the widget.</p>
<hr />
</div>

[Setek]

Not so fast. In IE all of the text disappears! If I try to select the area where the text should be, it's there alright. I can see it. But if I deselect it, it disappears again. Any ideas?

It's probably just IE's peek-a-boo bug :) Or was it guillotine? I can never keep track of IE's bugs...

Try adding

height: 100%;

in a separate section just for IE 6 and see if that fixes it. Sometimes,

position: relative;

fixes it, but I don't like that method because I'm fairly sure it's too much odd positioning techniques that makes the bugs come about in the first place :)

[martinship]

Thanks, that's it. Adding position:relative; to both the DIV and the IMG sections of the stylesheet seems to work. If position:relative; is only added to the div, the text reappears and the image disappears!

Could adding position:relative; have any ill effects or unintended consequences?

[Setek]

Umm, as I mentioned before, I think using a lot of positioning techniques to achieve something it wasn't designed to do creates problems in the long run.

For now, you can probably assume no, but just keep in mind this is a hack - you're assigning position to relative not to actually make use of relative positioning, but to "fix" a bug.

Just be on the lookout :)