I have a issue with one of my spans. Please consider the following styles:
.form_container .col1che
{
float: left;
width: 4%;
text-align: left;
}
.form_container .col2che
{
float: left;
width: 80%;
text-align:left;
}
.form_container .col3che
{
float: right;
width: 13%;
text-align:right;
}
These 3 spans in my code:
<div class="row"><!-- start: "row" -->
<span class="col1che">
<?php //some db feeds ?>
</span>
<span class="col2che">
<?php //some db feeds ?>
</span>
<span class="col3che">
<?php //some db feeds ?>
</span>
<div class="clear"></div>
</div><!-- end: "row" -->
The problem occurs when there is no data to be displayed in "COL1CHE" (or maybe even in any of them although I'm not sure) when there is no data this span "collapses" and its width is not honored. This happens in Firefox, in IE it doesn't "collapse".
I included a "clear" class to see if this helps but to no avail.
Any ideas?
The main thing to remember about a span element is that it is an inline element, which means that you will not be able to set the width or height of it as is.
The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
Span is an inline element and you can therefore not set a width. To set a width you must first set it to a block element with
display:block;
After that you can set a width. Since span is a native inline element, you can use inline-block too and it will even work in IE:
display:inline-block;
Width is not honored because span is an inline element. To fix this, add:
display: inline-block;
Depending on your situation, display: inline-block
may be better than display: block
because any content after the span won't be forced onto a new line.
display: block
will not help you here because when float is activated, the elements is automatically switched to block mode, whatever its initial mode, so your width should work.
The problem may be with the empty <span>
tag which might not be rendered because of some obscure rule I cannot remember. You should try preventing your span from being empty, maybe by adding a
if the content is empty.
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