CODEWITHSUNDEEP
htmlcss
user1444027
user1444027

Reputation: 5241

maintain width of span even if nothing in it

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.

Upvotes: 23

Views: 26527

Answers (3)

Andy
Andy

Reputation: 1141

By default span displays as inline.

So either add display:block to give it a block element or additionally you could use display:inline-block to keep it inline with the rest of the text (without using float).

Upvotes: 4

animuson
animuson

Reputation: 54729

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.

Upvotes: 48

Marko Francekovic
Marko Francekovic

Reputation: 1490

By default span element is an inline element, and it ignores width.

Try adding display:block to your spans.

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

Hope it helps.

Upvotes: 2

Related Questions