CSS Float - how to "turn off" for subsequent content

[Mark Vedder]

I have a page that contains an image. There is some text describing that image. I want that text to appear next to the image, so I am setting the CSS float attribute to 'right' on the image. That parts works.

This image and its description appears at the end of a topic. I do not want the next topic to appear next to the image since it would be confusing, and that section is going to have its own image to discuss. This does not happen when viewed in a browser that is wide. Below is a representation of what I am getting and what I want:

What I am getting

Text describing the image     +-------------------+
A bullet list:                |                   |
  - comment                   |                   |
  - another comment           |                   |
  - etc                       |     image         |
                              |                   |
NEXT TOPIC HEADER             |                   |
Discussion of the next topic  |                   |
starts here                   |                   |
blah blah blah                +-------------------+
blah blah blah blah blah blah blah blah blah blah 

What I want

Text describing the image     +-------------------+
A bullet list:                |                   |
  - comment                   |                   |
  - another comment           |                   |
  - etc                       |     image         |
                              |                   |
                              |                   |
                              |                   |
                              |                   |
                              +-------------------+
 
NEXT TOPIC HEADER           
Discussion of the next topic starts here                 
blah blah blah blah blah blah blah blah blah blah              
blah blah blah blah blah blah blah blah blah blah 

And here is the markup:

<div id='section1'>
<img src="images/screenshot.png" alt="~~~~" width="550" height="531" 
     style="float: right; margin-left:10px" />
Text describing the image
<ul>
<li>comment</li>
<li>another comment</li>
<li>etc</li>
<ul>
</div>
 
<div id='section2'>
<h2>NEXT TOPIC HEADER</h2>
Discussion of the next topic starts here
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
<div>

I'm trying to determine how to force the next section to not float next to the image. Any help is appreciated.

[Eric Pascarello]

look into CSS's

clear: [both | right | left]

Eric

[Mark Vedder]

Thanks Eric. I figured it had to be something simple.