Problems getting Div "right"

Question

I got the following HTML:

<div style="width:300px">
<div class="goals">
                    <div class="goalLeft">
                            <span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">7' (ET)</span>
                            <span class="goalResult">1:0</span><span class="player">Goetze </span>
                    </div>
                    <div class="goalRight">
                            <span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">9'</span>
                            <span class="goalResult">1:1</span><span class="player">Goetze </span>
                    </div><div class="goalRight">
                            <span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">80'</span>
                            <span class="goalResult">1:2</span><span class="player">Goetze </span>
                    </div><div class="goalLeft">
                        <span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">123' (ET)</span>
                            <span class="goalResult">2:2</span><span class="player">Goetze </span>
                    </div>
                    </div>
            </div>

And this CSS for that:

.goalLeft 
    {
        clear:both; 
        float:left;
    }

    .goalRight
    {
        clear:both;
        float:right;
    }
    .goals 
    {
         margin-left: 1em;
         margin-right: 1em;
    }
    #NeuesVomSpocht div.arrow 
    { 
        background:transparent url(setup/images/arrows.png) no-repeat scroll 0px -16px; 
        width:16px; 
        height:16px; 
        display:block;
    }
    #NeuesVomSpocht div.up 
    { 
        background-position:0px 0px;
    }

    .goalImage
    {
        display:block; 
        background-color:red; 
        width:22px;          
    }
    .goalMin
    {
        width:65px;
        background-color: cyan;
    }
    .goalResult
    {
        display:block; 
        background-color:green;              
    }
    .goalLeft .goalImage
    {
        float:left;
    }
    .goalRight .goalImage 
    {
        float:right;
        margin-left:auto; margin-right:0px;
    }
    .goalLeft .goalResult 
    {
        float: left;
    }
    .goalRight .goalResult 
    {
        float: right;
        margin-left:auto; margin-right:0px;
    }
    .goalRight .player 
    {                
        float:right;
        margin-left:auto; margin-right:0px;
    }
    .goalRight .goalMin
    {                
        float:right;
        margin-left:auto; 
        margin-right:0px;
    }
    .goalLeft .goalMin
    {                
        float:left;
    }
    .goalImage img 
    {
       width: 20px;
       height: 20px;
       vertical-align: top;
    }

What I want is that the text in the right Cyan (9,80) area should be aligned to the right. What am I doing wrong here?

Answer 1

So many floats... You shouldn't really use floats to replace text-align. But here is the fix:

.goalRight .goalMin {  
    text-align: right;
}

See it here: http://jsfiddle.net/eS7LL/