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?

   <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>

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;
}

I had a similar problem with <span> in FireFox (at least 47.0.2 and 50).

Fixed with the following CSS: span:empty:before {content: '\a0';}.

That would add one   before <span> contents if empty only and would not affect the layout of elements that have some text or children.

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?

I've been using padding-top: (insert number)px or % to keep my empty elements from collapsing. Seems to be working fine.

The simple fix is applying the {overflow:auto} css to the empty (or potentially empty) element, as described in Everything You Never Knew About CSS Floats > Clearfix To The Rescue

Note that this will end up hiding any absolutely elements parented by the element to which the css is applied that are positioned outside the parent. That is sort of expected, given what overflow applies to.

The three examples show:

• Lines with floats, with outlying numbering, but no {overflow:auto}.
• Same lines, but with {overflow:auto}.
• Same lines with no {overflow:auto}, but with a final non-breaking space.

p{position:relative;margin-left:2em;background-color:lightgrey}
p.Clear{overflow:auto}
span{display:inline-block}
p>span:first-child{position:absolute;left:-1.5em}
.Left{float:left}
.Right{float:right}

<h3>Lines with no p{overflow:auto}</h3>
<p>Lines have outlying custom numbering.</p>
<p><span>1</span><span class="Left">[Float left 1.-------------------------------------------------------------]</span>Line 1 plain non-float content that forces right float below element.<span class="Right">[---------------------------------------------------Float Right 1.]</span></p>
<p><span>2</span><span class="Left">[Float left 2.-------------------------------------------------]</span><span class="Right">[--------------------------------------------------Float Right 2.]</span></p>
<p><span>3</span><span class="Left">[Float left 3.---------------------]</span>Line 3 plain content covers collapsed line 2 that has no non-float content, and line 2's floats have disappeared. If the page width is narrow enough, it forces the right float below the element.<span class="Right">[---------------------------------------Float Right 3.]</span></p>
<h3>Same 3 lines with p{overflow:auto}.</h3>
<p>Lines now missing numbering, but all content is now within the elements.</p>
<p class="Clear"><span>1</span><span class="Left">[Float left 1.--]</span>Line 1 plain non-float content.<span class="Right">[--Float Right 1.]</span></p>
<p class="Clear"><span>2</span><span class="Left">[Float left 2.--]</span><span class="Right">[--Float Right 2.]</span></p>
<p class="Clear"><span>3</span>Line 3 plain content not merged into line 2 that has no non-float content.</p>
<p class="Clear"><span>2</span><span class="Left">[Float left.-----------------------------------------------]</span> <span class="Right">[------------------------------------------------Float Right.]</span></p>
<p class="Clear"><span>4</span><span class="Left">[Float left.-----------------------------------------------]</span>Line 4 plain content fills into collapsed line 3, except for floats.<span class="Right">[------------------------------------------------Float Right.]</span></p>
<h3>Lines with no {overflow:auto}, but ending with a non-breaking space.</h3>
<p>Lines now have numbering, and elements don't collapse,  but right floats can drop below the element.</p>
<p><span>1</span><span class="Left">[Float left.-----------------------------]</span>Line 1 plain non-float content.<span class="Right">[--------------------------Float Right.]</span> </p>
<p><span>2</span><span class="Left">[Float left.----]</span><span class="Right">[-----Float Right.]</span> </p>
<p><span>3</span><span class="Left">[Float left.-----------------------------------------------]</span><span class="Right">[------------------------------------------------Float Right.]</span> </p>
<p><span>4</span><span class="Left">[Float left.]</span>Line 3 plain content not merged into line 2 that has non-breaking space content.<span class="Right">[Float Right.]</span> </p>

Run the snippet full page, then resize the browser window smaller to see what happens to the floats relative to the enclosing element.

Either {overflow:auto} or a non-breaking space prevents the element collapsing, but only the former prevents any content falling outside the element. However, it kills the display of any absolutely placed content.

My recommendation is to use {overflow:auto} for basic float-containing content.

If placing content absolutely outside its parent, use a non-breaking space, but only if the floats will NEVER be pushed onto another line.

Alternatively, using the examples, use {position:relative;padding-left:2em} on the parent, and {position:absolute;left:0.5em} on the fixed content.