Category Archives: HTML

Force a span to honor a width

Posted on by

A span is normally a inline element so setting a width to it might not have the effects you are looking for.
In order to “force” a span to have a width it can be set as a inline-block

<span style="display:inline-block;width:92px;">&nbsp;</span>

another (better!) way is to use padding to give the span a size.

<span style="padding: 10px 20px; font-size: 0px;">&nbsp;</span>

(The font-size is here to “fix” the height of the span; and don’t forget that padding happens on both sides in this example so the end result is 20x40px)

Internet Explorer not rendering empty div correctly

Posted on by

Internet Explorer won’t render empty divs correctly.

I had a div with a height and a background image but no content; It was not rendered with the correct height it was only like one line.

A work around for this is to have some “content” inside the div (like a whitespace, a comment or why not both) then Internet Explorer renders the correct height.

<div class="some-class-with-size-and-background">
&nbsp;<!-- keep to get IE to render this div -->
</div>