Need FLOAT help

I am having a hell of a time getting this to work. Heres the dilemma.

I have two images each enclosed inside seperate divs, each enclosed in a “wrapper” div. I have the images floated nicely where they need to go BUT the problem is that the next paragraph of text, AFTER my wrapper div, keeps floating up right up against the container div. I cannot get this to stop. I notice when I shut the float off for my second image the paragraph doesnt float but of course my image is off now. Please take a look. The two images are at the top of the page and the pragrapgh that keeps moving says “Now you can own a piece of the web without emptying your wallet”. Thanks

<div id="wrapper">

<div>
<div class="insert">
<img src="images/monLogo.png" width="40%" alt="monitor" />
</div>
<div class="other">
<img src="images/sharp.png" width="40%" alt="sharp" />
</div>
</div>

<br /><br /><br />
<p class="nowyou">
Now you can have your piece of the web without emptying your wallet
</p>


<br />
<br />

<p class="intpara">
Why Blue Ninja?
<br />
Others may be able to help you get online but we help you stay there.
<br />
There are over 9 MILLION websites on the internet. Anyone can get online
but Blue Ninja gets you seen. We follow a STRONG mission statement which is
<br />
<br />
<span class="quote">"The internet belongs to everyone, we think its time you claim your share."</span>
</p>
</div>

HERE IS THE STYLE SHEET

#banner
{position:fixed;
left:0;
top:0;
width:100%;
z-index:5;
background-color:rgb(4,5,28);
}

#wrapper
{margin:10% 16% -6% 16%;
padding-top:60px;
border: solid 3px;
border-color:rgb(187,217,250);
background-color:#FFFFFF;
height:100%;
width:68%;
}

body
{background-color:rgb(4,5,28);
}

.insert
{border:solid black 2px;
width:45%;
margin-left:5%;
float:left;
}

.other
{border:solid black 2px;
width:45%;
float:left
}

.intpara
{font-family:Gisha;Geneva, Verdana, Courier;
font-size:1.5em;
text-align:center;
line-height:150%;
width:85%;
background-color:#E8E8E8;
margin:auto;
padding:18px;
}

.nowyou
{font-family:Gisha;Geneva, Verdana, Courier;
font-size:1.5em;
text-align:center;}

try adding clear:both to .nowyou

it moves it down below the floats but it still appears “attached” to the above container. When I try to move the “nowyou” down with a few breaks or margins it does not budge. Its like it is GLUED to the container above it

Your margin is prob flowing through the floated divs/img. You could do a border padding trick but just make it easy on yourself and add a div after the floated divs with clear both. That should allow you to move the next stuff freely.

Thanks Eric… Im in class now but will try this on my comp at home. While I have your ear I do have another question that maybe you can help with or send me a link and Ill read about it as to not bother you.

I have a wrapper div and at home I use Explorer 8 and Firefox. Inside my wrapper I have top padding set. Now there is a small difference in padding output from IE8 to Firefox so its not a huge deal BUT when I got to class today I opened the file on IE7 and it basically eliminates the top padding. The problem is that all of the contents of the div seem to scroll up above the viewable area of the div… almost like its scrolling up. Any ideas?

Ny the way, that worked!