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 sho

Solution 1:

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.

Solution 2:

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

.oneThirdColumn {
    min-height: 1em;
}

Solution 3:

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.

Solution 4:

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?

Solution 5:

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