Why isn't my text wrapping around my image? [Archive]

View Full Version : Why isn't my text wrapping around my image?

Glen_S

05-18-2007, 04:20 PM

I have used the following code in one page to wrap text around images and it works fine, but for some reason when I try to replicate it on another site the text keeps pushing the image out of my <div> box. I can get around this somewhat by creating another <div> to hold the image, but I'd rather figure out what I am missing here so I can wrap the text around the image.

the code:

==========================================================
<div id="box3">
<p style="margin: 10px; color:black;">
this is where some text is<br><br>
yet more text
<img style="width: 502px; height: 300px;" src="images/myimage.jpg" class="floatRight"></p>
</div>
==========================================================

The CSS in my stylesheet:

==========================================================
#box3 { float:left;
margin-right: 0px;
margin-top: 0px;
height: 305px;
width: 800px;
border-width: 0px;
padding: 5px;
background: clear;
}
img.floatLeft {
float: left;
margin: 4px;
}

img.floatRight {
float: right;
margin: 4px;
}
=========================================================

The page <head> contents:

=========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" media="all" type="text/css" href="css/dropmenu.css">
<title>My title</title>

</head>

=========================================================

I have moved the </p> to before and after the img tag, to no avail.

mwinter

05-18-2007, 04:37 PM

I have used the following code in one page to wrap text around images and it works fine, but for some reason when I try to replicate it on another site the text keeps pushing the image out of my <div> box. ...

<p style="margin: 10px; color:black;">
this is where some text is<br><br>
yet more text
<img style="width: 502px; height: 300px;" src="images/myimage.jpg" class="floatRight"></p>

A floated element cannot be rendered higher than the top of earlier block or line boxes. In other words, the image cannot be rendered higher than "yet more text" because it occurs after that in the source. You would need to place the image first.

A few quick notes:

Two consecutive br elements is usually a sign of misuse. The br element is meant to break a line, not introduce spacing. Use multiple block-level elements (paragraphs, in this case).
The img element is missing an alt attribute (which is required). If the image is purely decorative, use an empty value (alt="").
The class name, floatRight, is a poor choice. Use a name that represents what the class is, not how it is to be rendered. If the image is an inset into the paragraph, then "inset" is a better alternative.

background: clear;

There is no such value, clear. Perhaps you meant transparent?

Glen_S

05-18-2007, 05:34 PM

thanks! that did the trick