Give span height of 100% in a li

Question

At the time my html gives this output:

But i would like to have it like this:

So how you can see i tried to add a span where the number has its space. I gave this span the class:

.spanContainer{
   height:100%; 
   padding-right:15px 
}

But somehow the height:100% gives me not the desired effect! What should i do? Thanks http://jsfiddle.net/52VtD/3398/

<ul class="list-group">
    <li class="list-group-item">
        <span class="spanContainer">
            <a class="text-success">02401</a>
        </span>
        H2-Atemtest
    </li>
    <li class="list-group-item">
        <span class="spanContainer">
            <a class="text-success">03241</a>
        </span>
        Computergestützte Auswertung eines kontinuierlich aufgezeichneten Langzeit-EKG von mindestens 18 Stunden Dauer
    </li>
</ul>

Answer 1

<span> is an inline element, and height property in not applicable to non-replaced inline elements.

Additionally, changing the default display type of the span elements to block is not useful here as you are using a percentage value for the height property.

Because, a percentage value for height property is calculated with respect to the height of the generated box's containing block. And the in this case the container block doesn't have an explicit height.

From the MDN:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

Instead of setting a height property on <span> you could float the <span> to the left, wrap the inline text by a paragraph element and use margin-left property to aline the text, as follows:

.spanContainer{
   /* height:100%; 
   padding-right:15px  */
    float: left;
}

.list-group-item p {
    margin: 0;
    margin-left: 50px;
}

WORKING DEMO

Answer 2

Just float the .spanContainer element to the left and change the display of the text element to table. The reason this works is because floated elements are essentially taken out of the flow, while the .spanText will fill the remaining area, functioning as desired.

EXAMPLE HERE

.spanContainer {
    float:left;
    padding-right:15px;
}
.spanText {
    display: table;
}

It's worth noting that display:table isn't supported in IE7 and lower.