CSS Debugging help - empty div collapsing

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.

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