span tag height in Firefox

<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>

<div id="div1">FirstDiv</div>
<div id="div2">SecondDiv</div>

As long as the container for whatever is holding div's 1 and 2 is wide enough for them to fit, this should be fine.

You can set any element to display: inline-block to allow it to receive a height or width. This also allows you to apply any other "block styles" to an element.

One thing to be careful about however is that Firefox 2 does not support this property. Firefox 3 is the first Mozilla-based browser to support this property. All other browsers support this property, including Internet Explorer.

Keep in mind that inline-block does not allow you to set text alignment inside the element on Firefox if running in quirks mode. All other browsers allow this as far as I know. If you want to set text-alignment while running in quirks mode, you'll have to use the property -moz-inline-stack instead of inline-block. Keep in mind this is a Mozilla-only property so you'll have to do some browser detection to ensure only Mozilla gets this, while other browsers get the standard inline-block.

Inline elements can't have heights (nor widths) like that. SPANs are already display: inline by default. Internet Explorer is actually the broken browser in this case.