Why isn't the text in this list floating correctly?

Question

I have a list. Each item in the list contains an icon span and text span like so:

 <ul id="features">
     <li>
         <span class="icon"></span>
         <span class="text">blah blah blahlrceoahuoa steohuasnoet huntaoheu saoetnhu saoetuhsaoe tuhsaoetnhu saoehtuasoetnhu saou</span>
     </li>            
 </ul>

Using the following CSS

#features { list-style-type: none; }
#features li { overflow: auto;}
#features li span { float: left;  }
#features .icon { background: #000; height: 55px; width: 55px; display: inline-block;}
#features .text { margin-left: 24px; display: inline-block;  }

I believe this code should produce text which floats next to the icon, and automatically adjusts its width accordingly. However this isn't the case see jsfiddle.

Why isn't the text floating next to the icon?

Answer 1

width: auto will instruct the text span to assume as much width as it requires, based on its content. This is what causes the entire span to wrap when that space is not available.

Answer 2

You should be using a CSS background in the inner element and floating the LI. You do not need a separate element for the icon.

#features li { float left }

#features li span { 
      display:block;
      background-image: url(...);
      background-repeat:no-repeat;
      height:25px;
      padding-left:30px;
}

See my tutorial: I love lists .

If you want to use a font instead of an image, you can use position:relative , on your LI and add:

li:before {
    content: "\25A0";   <--- this is a UTF-8 square
    left: -1em;
    position: absolute;
    top: 0.1em;
}

(adjust your spacing values accordingly)

Answer 3

Ah, trying to make fixed and fluid width live together in harmony... an old problem.

Here's an updated fiddle with the solution: http://jsfiddle.net/dwZaN/11/

#features { list-style-type: none; margin-top: 24px; margin-right: 24px; }
#features li { margin-bottom: 24px; overflow: auto; width: 100%; }

#features li span {  }
#features .icon { background: #000; height: 55px; width: 55px; float: left; }
#features .text { padding-left: 75px; display: block; }

Basically...

• Float your fixed-width icon
• Don't float your fluid-width element, but give it padding-left with enough room to account for your icon and some buffer room (this automatically gives it 100% and subtracts whatever padding-left you specify)
• Both elements should be block-level. You don't actually need to specify anything for the icon, but your text span needs to be display: block (or you can just switch to DIV's which are already block-level)

Also, since you specify a right margin in your parent UL, adding width: 100% makes it expand beyond the browser window and creates a horizontal scrollbar. Simply remove it.