Ho un css che recita:

codice:
#boxquotepinnacle {
    background: #fbfdea;
    margin: -520px 0px -500px -500px; 
    -webkit-animation-name: move;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: right;
    -webkit-animation-timing-function: linear;
}

.rigapinnaclecolonnauno {
border: 1px solid;
border-color: black;
          width: 33%;
          height: 25px;
          margin-top: 47px;
}

.rigapinnaclecolonnadue {
border: 1px solid;
border-color: black;
          width: 33%;
          height: 25px;
          float: left;
}
Invece il programma del sito è;

codice:
<div id="boxpartita">
<div class="rigapinnaclecolonnauno">
<div class="rigapinnaclecolonnadue">
</div>
</div>
</div>
Il problema mio è che la cella generata da rigapinnaclecolonnauno e quella generatada rigaplinnaclecolonnadue mi risultano sovrapposte. Praticamente mi risulta "flglia" di rigapinnaclecolonnauno.

Io vorrei che fossero due celle affiancate sulla stessa riga. Il float; left; è evidentemente errato. Sapete come dovrei fare?