title: CSS Debugging help - empty div collapsing
body: <p>The following HTML is from an aspx page. This is in regards to to the first child DIV element. In IE7 the HTML renders as I would expect even when that DIV element is empty. It should be approximately 1/3 the width of it's parent, but in FireFox it is collapsing to zero width. All 3 divs are floated left. Anyways, my question is how do I keep the empty DIV's width at 32% in FireFox at least, and preferably Safari, Opera, and Chrome. I'm hoping the fix will correct the problem in all the browsers. It's no doubt the cause is my lack off CSS knowledge combined with the likely incorrect rendering of IE7. Its probably behaving correctly. Can anyone help me correct this problem? </p>
  
  <pre><code>   &lt;div style="padding-left: 4px ! important; overflow: auto; width: 96% ! important;"  class="fullwidthdiv"&gt;
  
             &lt;div style="width: 32% ! important;" class="oneThirdColumn"&gt;&lt;/div&gt;
  
              &lt;div style="width: 32% ! important;" class="oneThirdColumn"&gt;
               $&lt;input type="text" style="width: 70px;" class="underlinedTextBox updateReserveAmount" tabindex="123" id="ctl00_DefaultContent_payment1_paymentfrmView_updateReserveAmount" maxlength="11" name="ctl00$DefaultContent$payment1$paymentfrmView$updateReserveAmount"&gt;
              &lt;/div&gt;
              &lt;div style="width: 32% ! important;" class="oneThirdColumn"&gt;
              &lt;input type="submit" style="width: 120px;" class="updateReserve" tabindex="124" id="ctl00_DefaultContent_payment1_paymentfrmView_btnReserve" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&amp;quot;ctl00$DefaultContent$payment1$paymentfrmView$btnReserve&amp;quot;, &amp;quot;&amp;quot;, true, &amp;quot;&amp;quot;, &amp;quot;&amp;quot;, false, false))" value="Update Reserve" name="ctl00$DefaultContent$payment1$paymentfrmView$btnReserve"&gt;  
              &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>