title: Floating Div Madness upon Window Resize
body: <p>I am trying to create a purely HTML and CSS-based layout that presents the main content of a page on the left (which expands to the full <strong>width</strong> of the page, minus the box) and a smaller box on the right, say for navigation or information of some sort. Here is an example of the code that is causing the problem, with the problems described therein:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html lang="en" dir="ltr"&gt;
  
  &lt;head&gt;
   &lt;title&gt;Floating Div Madness upon Window Resize&lt;/title&gt;
   &lt;style&gt;
    * {margin:0; padding:0}
    body {margin:20px; font-size:0px; color:#000000}
    div.page {margin-right:120px; background-color:#AAAAFF; float:left}
    div.wide {width:300px; background-color:#AAFFAA}
    div.box  {width:100px; margin-left:-100px; background-color:#FFAAAA; float:left}
    h1 {font-size:x-large}
    p {padding-bottom:5px; font-size:small}
   &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
   &lt;div class="page"&gt;
    &lt;h1&gt;MAIN PAGE&lt;/h1&gt;
    &lt;p&gt;This is the main portion of the page (light blue). It is currently floated left with a right margin of 120px, to account for the box (light red) as well as the white space between it and the box (light red). All may look well on the surface, but...&lt;/p&gt;
    &lt;p&gt;Resize the window in Firefox (I tested both 3.5 and 4) and the white margin of the body can be cut off, not only on the right side, but on the bottom of the page, too.&lt;/p&gt;
    &lt;p&gt;Remove enough text and this div will shrink to fit it, no longer taking up the entire width of the page (minus the box).&lt;/p&gt;
     &lt;div class="wide"&gt;
      &lt;p&gt;If I nest another, non-floating div with a fixed width (light green), something even stranger happens when I resize the window, this time in Internet Explorer 6 (maybe in other versions, too): The text in the page div (light blue) is squished, I think by the margin of the box (light red). The fixed width div (light green) is unaffected by this.&lt;/p&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="box"&gt;
    &lt;h1&gt;BOX&lt;/h1&gt;
    &lt;p&gt;(this could be navigation, or anything else)&lt;/p&gt;
   &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I would like to keep the box (light red) later in the code for semantic reasons, but this is optional. Here are some of the more successful things I've already tried, and why they don't seem to work:</p>
  
  <ol>
  <li><p>Absolute positioning: This appears just as nicely as my own code when the browsers are not resized. It does address the disappearing body margin in Firefox to some degree. However, when the window size gets small enough, the box (light red) will go over or under the main page div (light blue), depending on the which z-index I have higher or lower.</p></li>
  <li><p>Floating only the box: This involves changing the HTML and placing the box (light red) before the rest of the content in the code. This automatically expands the main page div (light blue), something I haven't found a way to do (without a given amount of content) using the float method. However, the margins of the body are still removed in Firefox, the text still squishes in IE, and box (light red) will still go over or under (again depending on the z-index) the main page div (light blue) when the window gets small enough.</p></li>
  <li><p>Assigning min-width to everything: This was very successful in stopping the IE problem, but requires some CSS work on a page that is any more complex than this and which will support different media types. And, it still doesn't address the body margin in Firefox or give me a way to expand the main page div (light blue) without content, since it is still floating.</p></li>
  <li><p>Changing the body margin to a border: This doesn't solve the Firefox problem either; whether it is a border or a margin, it gets chopped off on the right and bottom of the page when I use floats.</p></li>
  <li><p>Add the margin to the box: This doesn't work for Firefox, either. I can get a bottom margin on the main page content (light blue) to stay in place (this is something that seems especially curious to me), but a right margin on the box (light red) still gets cut.</p></li>
  </ol>
  
  <p>Any help would be greatly appreciated, as I cannot find any sites or posts answering these problems, much less describing that these problems exist; I've certainly put in a large number of hours looking for and testing solutions!</p>