CSS Debugging help - empty div collapsing

Question

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>

are the child divs put there dynamically? Can you add anything to the style of the first div when it's empty? — Graham Clark
– Graham Clark, Commented Feb 6, 2010 at 11:03

Guffa · Accepted Answer · 2010-02-06 11:19:17Z

46

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.

answered Feb 6, 2010 at 11:19

Guffa

703k112 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Conway · Accepted Answer · 2012-04-19 18:58:31Z

23

I know this is a little old, but what I did was add a min-height style like this:

.oneThirdColumn {
    min-height: 1em;
}

answered Apr 19, 2012 at 18:58

Chris Conway

16.5k25 gold badges99 silver badges113 bronze badges

1 Comment

AlexStack Over a year ago

1em is quite a big default value. How about min-height: 1px;?

Y.B. · Accepted Answer · 2016-11-22 13:02:02Z

17

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.

edited Nov 22, 2016 at 13:02

answered Nov 22, 2016 at 12:36

Y.B.

3,58617 silver badges24 bronze badges

1 Comment

stan61285 Over a year ago

A guy in 2024 thanks you, this was the perfect fix for me. For others, i will note you can use your class instead of span.

T.J. Crowder · Accepted Answer · 2010-02-06 11:04:09Z

0

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?

answered Feb 6, 2010 at 11:04

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

4 Comments

T.J. Crowder Over a year ago

Of course, if people would just use tables for layout like God intended... ducks and runs

Guffa Over a year ago

@T.J.: You think that God invented table based layout? It was the second greatest trick of the devil... ;)

Guffa Over a year ago

@T.J.: I hear that you don't know your Baudelaire... ;) everything2.com/title/…

T.J. Crowder Over a year ago

@Guffa: I do know that one (which is surprising, because I'm actually quite ignorant in matters literary) but was making an attempt at a further joke. Not sure either my original or follow-up came off, though. :-)

Alexis Wilke · Accepted Answer · 2017-03-21 22:48:18Z

0

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

edited Mar 21, 2017 at 22:48

Alexis Wilke

21.2k11 gold badges111 silver badges183 bronze badges

answered May 31, 2015 at 0:13

Cee Dub

1

Comments

score 0 · Accepted Answer · 2020-05-09 15:41:08Z

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.

Collectives™ on Stack Overflow

CSS Debugging help - empty div collapsing

6 Answers 6

Comments

1 Comment

1 Comment

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related