Aligning images left with text
test test test
One more time
This took me forever, with a lot of trial and error, but I was finally able to float an image left and have the text flow to the right of the image.
My first problem was the background image on the storycontent class. The floating image was hidden behind the background image. After two days of looking for solutions for a buggy browser, (the problem only occurred in IE6), I realized what the problem was. The addition of z-index:1; to the image alignleft class solved that problem.
The css for the image is:
img.alignleft {
float:left;
padding: 5px;
z-index:1;
position:relative;
border: solid 1px;
margin-right:7px;
}
To prevent the image from dropping out of the bottom of the storycontent box I added a clearer div credited to Complex Spiral.
The clearer:
div.clearer
{
clear: left;
line-height: 0;
height: 0;
}
The HTML:
<img class="alignleft" src="http://domain.com/img.jpg" alt="Dancing in the moonlight" /> <span class="clearer"></span> Some text
Note, Complex Spiral used a div, I used a span because the div inside of the WP storycontent, (which adds a P tag), is invalid XHTML.
