css help with wrapping text around image 1

[xpblueScreenOfDeath]

I have several div tags. Some div tags might contain an image. I want the text in the div tag to wrap the image, but I don't text from other div to wrap around the image.

For example:

<style type="text/css">
.HeadStyle { FONT-WEIGHT: bold; FONT-SIZE: 11pt; COLOR: #000099; }
.ContStyle { FONT-SIZE: 10pt; MARGIN-LEFT: 30px }
</style>

<div class=HeadStyle>a:</div>
<div class=ContStyle>
   <IMG src='pic.bmp' width=150px height=200px align=left>This is just a test.
</div><BR>
<div class=HeadStyle>b:</div>
<div class=ContStyle>
Testing one two three.
</div>

In this example both the text "This is just a test", "b:", and "Testing one two three" will wrap around the image to the right side of the image. What I want to happen is only "This is just a test" to wrap around the image, and "b:" and "Testing one two three" to be underneath the image on its own separate lines. The text and image is base on a users selection on a previous page, so it could be that there is no div that contain an image. So any help on fixing this would be appreciated.

 

[ChrisHunt]

Try this:

<style type="text/css">
.HeadStyle { FONT-WEIGHT: bold; FONT-SIZE: 11pt; COLOR: #000099; [red]clear: left[/red] }
.ContStyle { FONT-SIZE: 10pt; MARGIN-LEFT: 30px }
</style>

[red].ContStyle img { float: left }[/red]
<div class=HeadStyle>a:</div>
<div class=ContStyle>
   <IMG src='pic.bmp' width=150 height=200 >This is just a test.
</div>
<div class=HeadStyle>b:</div>
<div class=ContStyle>
Testing one two three.
</div>

Note that I've trimmed the attributes of your <img> element and removed an unnecessary <br> tag.

Incidentally, if <div class="HeadStyle"> is actually a heading, I suggest you use a heading element like <h1> instead.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd