Struggling with positioning text around an image in IE7, it's not floating correctly as expected. The text appears below the image instead of beside it.
After researching, I discovered that the issue might be related to placing both the image and text within a floated div with fixed width and height. This probably triggers "hasLayout" for the parent div. I have been searching for a solution without much success so far.
If all else fails, I could resort to using jQuery since it's already implemented on the page, but my preference is to find a CSS-based resolution.
Here is a fiddle, which works well in modern browsers but fails in IE7.
Compatible Browsers: Firefox, Safari, Chrome, Opera, IE8+
Incompatible Browser: IE7
HTML:
<html>
<body>
<div id="box_section">
<div id="container1">
<div id="container2">
<div class="box">
<img src="http://c69282.r82.cf3.rackcdn.com/robot.jpg"/>
<p>Lorem ipsum etc etc whatever.</p>
</div>
<div class="box">
<img src="http://c69282.r82.cf3.rackcdn.com/pushing278.jpg"/>
<p>Lorem ipsum etc etc whatever.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
/* Container for floating boxes */
#box_section
{
height: 300px;
width: 984px;
margin-top: 35px;
padding: 0;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
... (CSS code continues)
Addressing this issue requires a flexible solution since there can be multiple boxes that need to be centered. Additionally, the boxes can vary in width, and images may be different sizes or absent altogether. Initial attempts at fixing this by absolutely positioning the image failed due to other constraints.