IE float workaround - css

Question

http://www.ugiinc.com/products/
I am new to all of this so please bear with me.
I used float right on subpages-text and subpages-excerpt and clear on the excerpt to get it to sit right under the link, Works fine in other browsers but in IE the excerpt sits below the image, still on the right. Is this the ideal way of doing this? Is there something i can do to fix it for IE?
.subpages-row {
border-bottom: 4px solid black;
border-top: 4px solid black;
}
.subpages-cell {
width: 800px;
}
.subpages-text {
float:right;
}
.subpages-excerpt {
clear: both;
float: right;
width: 370px;
}

Answer 1

Try modifying your CSS like this (/**/ added on any lines that are new/different):
.subpages-text {
float:right;
width: 500px; /**/
text-align: right; /**/
}
.subpages-images-image {
float: left; /**/
}
.subpages-excerpt {
clear: none; /**/
float: right;
width: 370px;
}
The problem you were having was with clear: both; on .subpages-excerpt. If you get rid of that, the text jumps back up to the top. We also float the image left so it won't interfere with the text. Then, if you increase the width of the title so that the excerpt never fits on the top line, it will pop right under the title. Lastly, since we increased the width of the title, it needs text-align: right so that it still appears on the right side.