iFrame gets bumped when window resized

[welshbaloney]

Hello,
I'm another newbie. I've been trying to create my site using css rather than tables and frames and I'm almost there.

My page consists of a content area with an image wrapped around it. I've broken the image into divs as follows:

<div id="wrapper">
  <div id="header">header image here</div>
  <div id="navigation"> 
    <4 rollover images each with target="ContentiFrame"> 
  </div>
  <div id="content">
    <iframe id="contentiframe" name="ContentiFrame" src="home.html"></iframe>
  </div>
  <div id="footer">footer image here</div>
</div>

In order to get the content div nested to the right of the navigation div, I've included "float=left" in the CSS styles for both.

The draft is here: http://www.yourpetstale.com/yourpetstale/TEST4/

The problem is when I resize the browser window - the iframe repositions below the navigation div.

Can anyone suggest a way to avoid this from happening (even if the right hand side of the browser cuts off the content)...
Thanks
Tony.

[MidiMagic]

That's the nature of div.

The only way I can think of is to place something with an absolute width on the screen. It must be wide enough to activate the horizontal scrollbar when the browser window is small enough to cause the div stacking.