IE Float Hack

[Muskie]

Alright, I've searched the forums unsuccessfully for this, and had no luck with google either (but thats mostly because there is so much to wade through when it comes to IE hacks 🙁 ).

My problem seems to be a simple one, IE is improperly displaying a floated element.

The problem is this: I have two elements, an image floated left, and a block of text floated right. Simple enough. However, in IE 5+ the block of text just ends up underneath the image, but slightly indented.

I realize that the title is also misplaced in IE, I am just going to use the underscore hack to fix that momentarily.

I've attached screenshots to help
And here is the code:

.picture{
	float: left;
	height: auto;
	width: auto;
}

.text{
	float: right;
	max-height: 500px;
	width: 380px;
	_max-height: 500px;
	_width: 380px;
	margin-left: 20px;
}

edit: ok ive added a third screenshot, apparently the float works in that one... sort of.

If this has been brought up before and I just missed it, just link me, please.

Thanks for any input.

 

[epochblue]

If the text and the image are part of the same containing element, I don't think you need to float the text to the right. Just floating the image should work fine.

Have you tried that yet?

 

[Muskie]

If the text and the image are part of the same containing element, I don't think you need to float the text to the right. Just floating the image should work fine.

Have you tried that yet?

I think I just tried that, but it didn't work. I just commented out the float property on the text, is that what you meant?

i noticed your sig says you've got an iPhone, how is it treating you?

 

[Sdashiki]

Floats can be confusing.

If you have a container div, which holds both the txt and the img...

then anything floated within that div will use the divs boundaries, left/right, as the positions of the float.

so, with that in mind, if you put something like:

<img class="floatleft">
<p>some text</p>

then the img will appear on the left side with the following text flowing on the rightside around it.

you should not need to float BOTH the img and the txt unless they are within separate divs. Which they shouldnt be anyway.

make sense?

 

[Muskie]

Floats can be confusing.

If you have a container div, which holds both the txt and the img...

then anything floated within that div will use the divs boundaries, left/right, as the positions of the float.

so, with that in mind, if you put something like:

<img class="floatleft">
<p>some text</p>

then the img will appear on the left side with the following text flowing on the rightside around it.

you should not need to float BOTH the img and the txt unless they are within separate divs. Which they shouldnt be anyway.

make sense?

Alright, I changed it to pretty much what you said. It worked great. Thanks a lot. I had screwed up something and spent 3 days trying to figure it out, only to fix it and then notice my floats were messed up. I have been getting slightly... perturbed, with the whole thing. So thanks for making it easier 🙂

 

[dabirdwell]

IE double margin float bug

IE will also double the margin of floated elements, so if you find this happening, a workaround is to add display:inline; to the style of the floated element that has a margin.

 

[epochblue]

i noticed your sig says you've got an iPhone, how is it treating you?

Great so far! I'm really excited to see what kind of goodies I get when they start doing software updates, though 🙂