Проблемы получения Div "право"

Question

я получил следующий 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> 

И это CSS для этого:

.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; 
    } 

То, что я хочу, что текст в правой Cyan (9,80) область должна быть выровнена вправо. Что я здесь делаю неправильно?

Answer 1

Так много поплавков ... Вы не должны действительно использовать поплавки для замены выравнивания текста. Но вот исправление:

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

Посмотри здесь: http://jsfiddle.net/eS7LL/