title: CSS max-width with percent
body: <p>max-width with a percent doesn't seem to work in either IE 8 or Firefox 3. Specific pixel widths work fine. Am I missing something?</p>
  
  <p>I have an input form, and I want to display some explanatory text to the right of it. But I don't want the explanatory text to squash the form.</p>
  
  <p>I haven't used max-width before but it seemed an excellent solution. I wrote this simple CSS style:</p>
  
  <pre><code>div.hint {max-width: 50%; float: right;}
  </code></pre>
  
  <p>Then I wrote:</p>
  
  <pre><code>&lt;div class=hint&gt;... hint text&lt;/div&gt;
  &lt;form action=xxx method=post&gt;
  ... etc ...
  </code></pre>
  
  <p>The div.hint squashes the form severely to the left.</p>
  
  <p>I tried this with just some text instead of the form. The div.hint takes about 95% of the screen, just gives a small margin on the left, and then the other text is pushed completely below it.</p>
  
  <p>If I change the max-width from a percent to a fixed number of pixels, it appears to work. But I don't want to base it on pixels because I don't know the dimensions of the user's browser.</p>
  
  <p>Does percent not work with max-width despite what I read in documentation, or am I missing something?</p>
  
  <hr>
  
  <p>In response to Seanmonster's comment: Here, I'll give a trivial but complete web page that illustrates what I thought should work but doesn't:</p>
  
  <pre><code>&lt;html&gt;&lt;title&gt;Max width test&lt;/title&gt;
  &lt;style&gt;
  .form {max-width: 75%; float: left;}
  .hint {max-width: 50%; float: right;}
  &lt;/style&gt;
  
  &lt;div class=hint&gt;
  &lt;p&gt;Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that
  all men are created equal. We are now engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated,
  can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place
  for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Etc.
  &lt;/div&gt;
  &lt;div class=form&gt;
  &lt;table&gt;
  &lt;tr&gt;&lt;th&gt;Label 1 &lt;td&gt;Value 1
  &lt;tr&gt;&lt;th&gt;Label 2 &lt;td&gt;Value 2
  &lt;tr&gt;&lt;th&gt;Label 3 &lt;td&gt;Value 3
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I open this page in a browser, I get, not two columns, but the "hint" div taking 100% of the width, and below that the "form" div taking 100% of the width. If I change both the max-width's to "width: 50%", I get two columns as I would expect. Apparently I'm missing something about how max-width is supposed to work, but ... I don't get it.</p>