Floating Divs, wraping text outside div. (I am a n00b)

[benwah1983]

Greetings,

Here is my problem:
The following code shows a div with two small nested divs (images with a title), then the div is closed. Another one opens and a "random text" is displayed.
[HTML]<div style="width: 500px;">
<div style="float: left; padding: 20px;">
Image Title 1<br/>
<img src="test.jpg"/>
</div>
<div style="float: left; padding: 20px;">
Image Title 2<br/>
<img src="test.jpg"/>
</div>
</div>
<div style="width: 500px;">
<p>This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text This is some random text
</p>
</div>[/HTML]

The results show the text in the second main div (random text) shown next to the images. What if I don't want the text to be next to the images, I want it below the first main div? How would I do that? Howcome is the "float: left;" having an effect on the following div?

The only way I can make the "random text" appear under the images is by entering several <br /> which is a dirty solution.

I don't know so much about CSS sorry if my question is n00b-like.

Here is an example of the code posted above:
http://tempblog3344.blogspot.com/

-Ben

[David Laakso]

Clear the floats. In the source document, you have:

<div style="width: 400px;">
 

Change it to (add clear:both;)

<div style="width: 400px;clear:both;">
 

See CSS 2.1 specs flow-control

[benwah1983]

Awesome thanks a bunch!