Working on simply floating text around an image, but it’s not going well in IE7. The text is pushed below the image, as if no float.
From what I’ve read, the reason for this could be that the image and text are within a floated (and fixed width/height) div, which presumably triggers “hasLayout” for the containing div. I’ve been looking for a clean workaround, but none has yet been found.
In worst case I guess I can use jQuery, as I am already using that on the page, but I would prefer to solve this with CSS.
Here is a fiddle, works well in good browsers, but should fail in IE7.
Good (Firefox, Safari, Chrome, Opera, IE8+):
Bad (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; /* Fixed height and width */
width: 984px;
margin-top: 35px;
padding: 0;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
/* Containers used to centre floated items independent of number */
/* In real webpage there can be any number of boxes. */
#container1
{
padding: 0;
float:left;
width:100%;
overflow:hidden;
position:relative;
}
#container2
{
clear:left;
float:left;
padding:0;
position:relative;
left:50%;
}
/* The box. OMG. */
.box
{
float: left;
position:relative;
right:50%;
height: 190px; /* Note fixed height and width */
width: 350px;
border-style: solid;
border-color: #ebead4;
border-width: 1px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
margin: 20px;
overflow: hidden;
}
/* Goal is to float text around image. Note that images have fixed width/height.
Images snatched from random website for demonstration purposes. */
.box img
{
float: left;
margin-right: 15px;
height: 180px;
width: 200px;
border-style: solid;
border-radius: 5px;
border-color: #eeeeff;
border-width: 1px;
}
Note that the solution for the containing div must be quite flexible, as there can be any number of these boxes and they have to be floated in the center (jQuery is used to only display one row at a time). The boxes can also be any one of 4 different fixed widths.
Also this is further complicated by the fact that the image can be one of 2 widths (2 different CSS classes), or not be there at all. I thought about making the image position absolute and do it with margins, but that therefore fails.
Aw scrap it. My mistake.
Turns out the fiddle works fine in IE7, and the problem was that I had a global css rule for “header” elements which set min-width. I used header elements in my boxes… Feeling very smart now.
Thanks to all of you who tried to help.