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_c         


        

Answer 1

To make this work simply add

display: block;

To the style.

Answer 2

Display block and optionally float left helped me.

display: block;
float: left;

Answer 3

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;

Answer 4

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.

Answer 5

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.