Enforce Widths on Empty Block Elements

One of the side effects within CSS that I find somewhat strange is that even if you give an element an explicit width, the element width is not respected if the element is empty or the elements within it are absolutely or fixed position. Of course the simple solution is adding to the given element, but something about that is undesirable: the height of that element will vary due to the font-size of said element. For one recent case, the side-effect changed the layout of the page. Eeek! For my case, I needed to keep the element width but with minimal effect on height. Luckily there's an easy solution!

The CSS

The solution amounts to using the min-height property:

.myElement { min-height: 1px; }

Setting a minimum height on the the element causes its width to be respected, and since 1px is the smallest height possible, that's the most unobtrusive solution!