Align text at the end and the beginning of a div

Question

Currently I'm having a solution, but I'm almost certain that there's a better solution out there. Basically I'm having a block-element and want to align some of the text at the beginning of my block and some at the end.

Here's a little jsfiddle example

What I'm doing is using float and 2 more block-elements inside to align it:

<div id="block">
    <div id="start">1</div>
    -
    <div id="end">12</div>
</div>

#block {
    text-align:center;
    background: #000;
    color: white;
    width:150px;
}
#start {
    float:left;
}
#end {
    float:right;
}

I have many of those little objects, so my code is bloated with div's. Is there no more lightweight solution for this out there ?

Answer 1

May be you can use CSS :after & :before pseudo classes like this:

HTML:

<div id="block">
    hello
**</div>

CSS:**

#block {
    text-align:center;
    background: #000;
    color: white;
    width:150px;
    overflow:hidden;
}
#block:before{
    content:"1";
    float:left;
}
#block:after{
    content:"12";
    float:right;
}

http://jsfiddle.net/ScHdJ/3/

But is not work in IE7 & below.

Answer 2

I fiddled a possible answer based on the answer to this question.

http://jsfiddle.net/ScHdJ/2/

Works in all browsers, as far as I can see...