CSS - width not honored on span tag

Question

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?

Answer 1

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;