Question

Is it possible to maintain the width of a span somehow if it is empty?

I have the following HTML pseudo table:

<p><span class="col1">Day:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Time:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Class:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Teacher:</span><span class="col2"><?php echo somephp ?></span></p>

With CSS:

span.col1 {width: 100px;float: left;}
span.col2 {width: 100px;}

Sometimes the PHP that is echoed in col2 is empty and when this happens col2’s width is 0 and col1 on the paragraph below it ends up stacking up next to col1 in the paragraph above.

Answer 1

Your col2 spans are ignoring the width because they are inline elements. You need to make them inline-block elements.

span.col2 { width: 100px; display: inline-block }

Also keep in mind that you may need to add a height to it depending on where it’s displayed, or you’ll end up with a span 100px wide but 0px high.