Question

On one of my web pages I have a DIV element, containing string of text inside, which is of, say, 1.1em size. For example:

<div id="displaydiv">
    <b>Hello World</b>
</div>

Another page has the same DIV element, but with no text inside it at all. And that’s why this DIV has the visual height of less value than the one on the first page.

<div id="displaydiv">

</div>

What is the recommended way of keeping the DIV element on the second page of the same height as on the first one?

Answer 1

Try putting an   inside.

If the page is dynamically generated and your template language supports conditionals, make sure only to show the   when there’s no content.

Otherwise, if you can’t show it only when empty, to avoid messing up your text alignment (thanks to @bensiu for pointing this out), stick the   at the end of the string (or beginning if the text is right-aligned). If it’s center-aligned, you can put an   on both ends.