Problems with float in IE6/7

[delcypher]

Hi I'm having a little trouble getting IE6/7 to do what I want.

I have a (container) div which contains an image and another div with text in. The code for this is below.<div class="figure"><img src="/img.php?src=trialsexample.jpg" alt="Trials unicyclist" /><div>Figure 1: a unicyclist jumping a gap on a trials course</div></div> <p>Trials unicycling is a type of unicycling that focuses on trying to overcome various natural or urban obstacles without falling off or putting a foot or hand down. The sport derives from bike trials although competitions are performed differently. Unicycle trials competition lines allow..</p>

I then use CSS to float the (container) div to the right. This is done using the code below .figure { clear: right; float: right; margin: 5px 5px 5px 5px; } .figure img {display:block; margin-left: auto; margin-right: auto;} .figure div { font-size:0.9em; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; display: block; text-align:center; margin-left: auto; margin-right: auto; max-width:20em; }

In Firefox 3, this renders as I want with the text in the <p> wrapping round the text around the floated container.

The page can be seen here => http://www.unicycle.org.uk/uuu/trials/about

In IE6/7 this doesn't work at all. For some reason the (container) div has 100% width of its parent container. I don't want to declare a width for the (container) div because I want it to resize depending on the image inside it.

I've found even if I declare a width for the (container) div the text in the <p> does not go in the right place and it get's pushed underneath the floated (container) div.

Does anyone know how I can fix this to work in IE6/7?

[Fang]

.figure {
float: right;
margin: 5px 5px 5px 5px;
}

.figure img {display:block;}

.figure div {
font-size:0.9em;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
display: inline;
text-align:center;
margin-left: auto;
margin-right: auto;
max-width:20em;
}

[delcypher]

Thanks for the reply but that didn't really help. The clear: right; needs to be there to make sure subsequent div (containters) go underneath previous ones.

After playing around I found that the .figure img {display:block; margin-left: auto; margin-right: auto;} was causing part of the problem. If I remove the margin-left & margin-right then IE starts behaving better but...

1. The images are no longer centred in the div (container)
2. Text in another paragraph which should also flow around the div (container) does not!

Any other ideas?

If I use IE conditional comments to control margin-left and margin-right how do I set them so IE doesn't screw up?

[Fang]

Give the div a fixed width

[ezravan]

Ok from what I could tell you have a block declared a block, when you declare a DIV - block.

try a definite margin such as % or px, em on the image if you have problems in IE6 There is really no reason for auto when you can do % to keep consistent margins.

Your max-width should be on the main div (.figure) not the embedded div

and I think that was it... you can look at it at http://littleprayerbox.net/testfloat.html

.figure {
clear: right;
float: right;
margin: 5px 5px 5px 5px;
background: #dfdfdf;
max-width: 40%;
}

.figure img {
display:block;
margin: 10%;
}

.figure div {
font-size:0.9em;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

text-align:center;
margin-left: auto;
margin-right: auto;


}

<div class="figure"><img src="/www/img/header.gif" alt="Trials unicyclist" />
<div>Figure 1: a unicyclist jumping a gap on a trials course</div></div> <p id="content">Trials unicycling is a type of unicycling that focuses on trying to overcome various natural or urban obstacles without falling off or putting a foot or hand down. The sport derives from bike trials although competitions are performed differently. Unicycle trials competition lines allow..</p>

Also, probably a better way to do this is with a <dl> a definition list, or <ul> that way you can float li's or dt's with (classes like "left" "right" )left and right to create the effect for many rows and use the UL or DL to contain them.

[ezravan]

Oh ya, I messed all the widths and margins up with %, and I don't have a inline width on the IMG which is ok or by CSS.. AND I put a ID you don't need on the <p>.. I guess I could of edited my post :) I'm new at this. ALSO.. you will want to wrap this in a div to have better control, set it's width then, as you know but others may not, your max-width if set by em or % will become relative to the wrappers width.