float not working in internet explorer 7

[NIA2]

Hi everyone,

I'm trying to float a paragraph of text to the right side of an image. I've wrapped a div around the para and image and floated the div (as apparently you're supposed to do, ie. float the container) and then I've floated the image and paragraph separately. It all works fine in most browsers but when I test in Internet Explorer 7, it's not floating.

I wondered if someone could tell me what the problem is in IE and if there's a workaround. The code used is below.

Thanks for any help.

<div id="columnMainInner">
            <h1>Iridology</h1>
            <div class="floatContain">
              <p id="para1"><img src="../images/iridInner.jpg" alt="Image of Iridology consultation" />Iridology is the study of health carried out through an examination of the eye. By assessing the variations of colour and fibre we can see the constitutional strength of the physical body. Iridology can also show emotional patterns and aspects of the personality as well as pathological potential. </p>
            </div>
          </div>

div.floatContain {
	float: left;
	padding-top: 10px;
}

div.floatContain p.para1 {
	float: left;
}

div.floatContain p.para2 {
	padding-top: 5px;
}


div.floatContain img {
	float: left;
	padding-right: 15px;
}

 

[NIA2]

Sorry guys,

This seems to be working now. The style sheet must not have been loaded completely when I tested.

All good now.

 

[Vragabond]

If it works like that, then it's a miracle. Or, better yet, the image should float (last rule) but not the paragraph. That is because you're floating paragraph elements (p) that have a class of para1. You have no such paragraph in your code. You have a paragraph with an id of para1.

I actually don't think that you need the to float the paragraph.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]