I created two divs in my page, and floated them both to the left so div1 is on the top left, and div2 is immediately to the right of it.
The contents are as follows:

HTML Code:
<div id="div1">

<div id="div2">
   <iframe />
The problem is that when I resize the browser window, the two divs float together so that div1 overlaps div2.

How can I have that not happen?

I would like to the form div (div1) and the iframe div (div2) to stay the same width, div2 immediately to the right of div1.