How to prevent DIV wrapping if they don't have a fixed size?

I'm completely pissed off with the divs, I'm soon to be done with website, but a simple thing I have no idea how to solve.

Basically I got a menu and a content divs, the content is different from page to page and I don't want them to wrap against each other.

I've read dozens of posts saying exactly to put a min-width to a wrapper, but I've no idea what my min-width would be. Some pages are just 600px width, while some are almost 1000px, Its got to be used as a PHP template.

Here is the code, I'll be very glad if some one can help at all, because I'm completely frustrated with this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <style>
    div {
      padding: 2px
    }
    
    div.menu {
      background-color: #FAFAA0;
      float: left;
    }
    
    div.content {
      background-color: #9DFBA9;
      float: left;
    }
  </style>
</head>

<body>
  <div class="menu">
    menu<br>menu<br>menu<br>menu
  </div>
  <div class="content">
    The pages which have different size here. For example:
    <div style="width:600px">Page one</div>
    or
    <div style="width:900px">Page two?</div>
  </div>

  <div style="clear:both">
    In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br> So I can't just put a min width like 1024px.<br> When they are about to wrap, the scrollbar should appear only then...<br> How can I achieve
    that?
  </div>

</body>

</html>

Solution

Is this what you're after? http://jsbin.com/exuvoz

I enclosed the .menu and .content elements in a <div> with float: left, and changed div.content { float: left; } to div.content { overflow: hidden; }.