Menu
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.
978
Assigning the Width of the Span ElementYou can assign a width to the span after setting its “display” property to either “block” or “inline-block.” Moreover, you can use the float and width properties to assign a width to the same element. The width of span is affected by the default display property of the same.
Where you want to add the blank space, create a <span> element and apply the style in it. Set the padding-left property to 30px . After it, close the <span> tag. Write the remaining text and close all the previously opened tags in the code.
Approach: The solution is to give some height (or min-height) and width (or min-width) to your HTML div. When you set a particular height and width for a div, it does not matter if it is empty or overflowed, it will only take up the space as given in the code.
The span is an inline element, so the only way to change its width is to make it a block element or setting its display to inline-block. After doing this, you should float it to the left.
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.
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
