tags:

views:

2231

answers:

5

Hi All

I have a issue with one of my spans. Please cosider 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 im 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?

thanks

+2  A: 

To make this work simply add

display: block;

To the style.

Nissan Fan
+9  A: 

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;
richard
+5  A: 

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.

jimyi
+1  A: 

How does it make sense to change the display property of an inline element?

It's much better semantically to just use a div tag, which is block by default and requires no additional CSS to function as intended.

+1  A: 

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 &nbsp; if the content is empty.

Vincent Robert
ok great, floated elements becoming automatically blocks explains alot in terms of the behaviour i saw on my page...i tried the nbsp tip and it worked great thanks...if someone who knows why no content would make this collapse maybe they can chime in just to clarify this curious behaviour, but for now this is a great fix.
chicane