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

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…