Resolved Text not wrapping around image [Archive]

...

View Full Version : Resolved Text not wrapping around image

sterlingcooper

12-21-2010, 02:19 AM

Hi, I know this is very basic but I am clearly missing something... I am trying to wrap text around an image. Instead of uploading the site, I threw this code together, which repeats my problem:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title></title>
</head>

<body>
<div id="column">
<p>Black-top surfaces deteriorate from exposure to air, sun, rain, freezing weather and snow, from the wear of traffic and from the hardening of the asphalt surface. If this dry, weakened condition is not corrected, cracks and breaks soon appear. Moisture seeps in.

<img class="floatLeft" src="doit.png" width="200" height="200" alt="doit">

The base becomes soft. Traffic churns it up. In low temperatures the moisture freezes and expands, causing unsightly, dangerous holes to develop. Expensive time-consuming replacement becomes necessary.</p>
</div>

</body>

</html>

body {
color: red;
}

.floatLeft {
float: left;
margin-left: 125px;
}

#column {
width: 300px;
}

Here's what it looks like when it's not wrapping:

http://img189.imageshack.us/img189/7991/dammitj.jpg (http://img189.imageshack.us/i/dammitj.jpg/)

Thanks very much for any help.

sterlingcooper

12-21-2010, 03:40 AM

figured this out... my eyes are just playing tricks on me. should have been img src, then class. Unless there's an easier way?

Excavator

12-21-2010, 05:09 AM

Hello sterlingcooper,
src and class can come in either order... it would all work better without that huge left margin though.
Try it like this - <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {color: red;}
.floatLeft {
height: 200px;
width: 200px;
float: left;
/*margin-left: 125px;*/
}
#column {width: 300px;}
</style>
<title></title>
</head>
<body>
<div id="column">
<p>
Black-top surfaces deteriorate from exposure to air, sun, rain, freezing weather and snow,
from the wear of traffic and from the hardening of the asphalt surface. If this dry, weakened
condition is not corrected, cracks and breaks soon appear. Moisture seeps in.
<img class="floatLeft" src="doit.png" alt="doit">
The base becomes soft. Traffic churns it up. In low temperatures the moisture freezes and
expands, causing unsightly, dangerous holes to develop. Expensive time-consuming replacement
becomes necessary.
</p>
</div>
</body>
</html>

sterlingcooper

12-21-2010, 06:14 AM

Thanks Excavator!