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?
<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("ctl00$DefaultContent$payment1$paymentfrmView$btnReserve", "", true, "", "", false, false))" value="Update Reserve" name="ctl00$DefaultContent$payment1$paymentfrmView$btnReserve"> </div> </div>
There are many ways to prevent the parent of floated elements from collapsing in CSS: Method 1 (Using Overflow Property): We can use the overflow property of CSS to prevent the parents from collapsing. Set the value of the overflow property as “auto” for the parent and it will not collapse any more.
Every Website Uses Empty Divs. If you wanna use it then you can. There are no limitations.
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.
I know this is a little old, but what I did was add a min-height style like this:
.oneThirdColumn { min-height: 1em; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With