If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Problems with float in IE6/7

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.

Code:

<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

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.

<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.

Oh ya, I messed all the widths and margins up with &#37;, 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.