Text overlaps image when floating image left

I am trying to have some text appear next to an image, rather than appearing below the image. I have attempted to use a "float:left" style on the image, but the following text ends up overlapping the image, rather than appearing to the right. I'm including a test page page exhibiting the problem below.

Can someone help me out?

Thanks,
bwb


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div#entry {
 width: 500px;
 border: 1px solid #c9c9c9;
 margin: 5px;
}
div#entryheader{
 position: relative;
 padding:5px;
}
div#entry img{
 float: left;
 padding: 2px;
 border: solid 1px #a7a09a;
}
</style><title>Test</title>
</head>
<body>
<div id="entry">
<div id="entryheader">
Improve Education for our Children
</div>
<div id="entrybody">
<img width="165px" height="204px" src="http://example.com/165x204_image.png"/>
<div id="imgtext">
<p>
I believe that every child deserves a high quality education. To
ensure a high quality education we need to:
</p>
<p>
<ul>
<li>Adequately and equitably distribute chapter 70 school aid</li>
<li>Reform charter school financing</li>
<li>Fully fund special education circuit breaker</li>
</ul>
</p>
</div>
</div>
</div></body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> #entry{position:absolute;top:0.3em;left:0.3em;width:31.25em;height:15.125em;border:0.0625em solid #c9c9c9} #entryheader{position:absolute;padding:0.3em} #entrybody{position:absolute;top:2em;width:100%} #entry img{position:absolute;padding:0.125em;border:solid 0.0625em #a7a09a;width:10.3125em;height:12.75em} #imgtext{position:absolute;left:11.5em} </style> <title>Test</title> </head> <body> <div id="entry"> <div id="entryheader">Improve Education for our Children</div> <div id="entrybody"> <img src="http://example.com/165x204_image.png"/> <div id="imgtext"> I believe that every child deserves a high quality education. To ensure a high quality education we need to: <ul> <li>Adequately and equitably distribute chapter 70 school aid</li> <li>Reform charter school financing</li> <li>Fully fund special education circuit breaker</li> </ul> </div> </div> </div> </body> </html>

Text overlaps image when floating image left

Want text to flow around image

bwbensonjr

MarkFilipak

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week