CSS Debugging help - empty div collapsing

Question

Hi Guys, 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?

Thanks for any help or tips, ~ck in San Diego

   <div style="padding-left: 4px ! important; overflow: auto; width: 96% ! important;"  class="fullwidthdiv">

           <div style="width: 32% ! important;" class="oneThirdColumn"></div>

            <div style="width: 32% ! important;" class="oneThirdColumn">
             $<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">
            </div>
            <div style="width: 32% ! important;" class="oneThirdColumn">
            <input type="submit" style="width: 120px;" class="updateReserve" tabindex="124" id="ctl00_DefaultContent_payment1_paymentfrmView_btnReserve" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$DefaultContent$payment1$paymentfrmView$btnReserve&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" value="Update Reserve" name="ctl00$DefaultContent$payment1$paymentfrmView$btnReserve">  
            </div>
   </div>

Answer 1

I suspect it's because of the float. Can you make them display: inline-block instead of floating them? But that will probably make IE unhappy, it doesn't like you to inline block elements. Perhaps spans that are display: inline-block instead?

Answer 2

It's not the width that is the problem, it's the height.

If you don't have any content in the div, the height becomes zero. However, there is a well known bug in IE, where it makes the content of all elements at least one character high.

You can specify a height for the div, or you can put a   in it when you don't have anything else to put there.