I have checked my page against as many browsers as poss and it is fine in all but ie7. The text in the search-desc div breaks out of the float-fix div and moves to the right.
<div id="contents-content">
<div class='search-results'>
<div class='float-fix'>
<div class='search-cols'>
<div class='search-desc'>
TEXT THAT BREAKS GOES HERE
</div> <!-- end search-desc div tag -->
</div> <!-- end search-cols div tag -->
<div class='search-image'> <!-- add image thumbnail -->
THUMBNAIL IMAGE GOES HERE
</div> <!-- end search-image div tag -->
</div> <!-- end float-fix div tag -->
</div> <!-- end search-results div tag -->
</div> <!-- end contents-content div tag -->
CSS File:
#contents-content { /* Contents Page */
font-size: .85em;
margin: 1.5em 1em 0 1em;
min-height: 85em;
}
.search-results{
width:52em;
border:1px solid #000000;
margin: 1em 1em 0 0; /* Shorthand notation (top, right, bottom, left) */
}
.float-fix{display: inline-block;}
/* Hide from IE-mac \\*/
* html .float-fix{height: 1%;}
.float-fix{display: block;}
/* End hide from IE-mac */
/*Float fix:*/
.float-fix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.search-cols{
width:16.5em;
float:right;
position:relative;
display: inline-block;
}
.search-desc{
width:35em;
float:right;
position:relative;
padding: 1em 1em 1em 1em;
}
.search-image{
width:9.5em;
float:left;
position:relative;
padding: 1.5em 0 0 2em;
}
Thanks for taking the time to look and I hope the solution is obvious to those with more CSS experience than myself.
Colin