Hcabnettek Hcabnettek - 18 days ago 7
CSS Question

CSS Debugging help - empty div collapsing

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

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 &nbsp; in it when you don't have anything else to put there.