Problema con l'allineamento Div, 3 divs stesso linea orizzontale

Question

Sto cercando di migliorare le mie capacità CSS e ho qualche problema. Voglio allineare 3 Div sulla stessa riga, a partire dalla parte superiore del Div del contenitore. Sono stato in grado di ottenerli allineati orizzontalmente, ma non vengono visualizzati nella parte superiore. Sembra che stiano tutti allineando con il fondo che non riesco a capire. Qualcuno può indicarmi nella giusta direzione su come fare in modo che i Div non abbiano margine e (fluttuare?) In cima?

Ho provato a dichiarare i margini ma non ho avuto molta fortuna. Inoltre, questo sarà in una vista parziale tramite MVC, quindi impostare il contenitore su Absolute potrebbe non essere un'opzione perché la sua altezza dalla parte superiore della pagina cambierà.

Ecco un Jfiddle E ho anche allegato il mio codice, sia HTML che CSS, insieme a ciò che viene reso nel mio browser.

Grazie!

Html:

<fieldset>
<legend>Items</legend>
 <div class="outercontainer" id="top">
    <div class="containera">
      <div class="group-title">
        <input type="checkbox" runat="server" />
      </div>
        <div class="left item">Left Content</div>
        <div class="center item">Center Content</div>
        <div class="right item">Right Content</div>
    </div>
</div>
<div class="outercontainer" id="bottom">
  <div class="containera">
      <div class="group-title">
        <input type="checkbox" runat="server" />
      </div>
      <div class="left item">Left Content</div>
      <div class="center item">Center Content</div>
      <div class="right item">Right Content</div>
  </div>
</div>
</fieldset>

CSS:

#top {
    border: 3px solid green;
}
#bottom {
    border: 3px solid blue;
}
.item {
    position:relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin:0;
    top:0;
    width: 32%;
    color: white;
}
.left {
    background:red;
}
.right {
    background:blue;
}
.center {
    background:green;
}
    .containera {
    text-align: center;
    white-space: nowrap;
}
    .group-title {
    text-align:center;
    font-weight:bold;
    font-size:larger;
}
.group-title2 {
text-align:center;
width:100%;
}

Di seguito è riportato ciò che viene reso:

Answer 1

È a causa delle tue caselle di controllo. Basta metterli dopo i tre Div di contenuto.

<div class="containera">

    <div class="left item">Left Content</div>
    <div class="center item">Center Content</div>
    <div class="right item">Right Content</div>
    <div class="group-title">
        <input type="checkbox" runat="server" />
    </div>
</div>

Answer 2

Devi avere qualcos'altro che sta succedendo lì, perché quando ho modificato il tuo violino per rendere gli oggetti di divie diverse allineati nel modo in cui sembra che tu voglia loro. Quello che stai descrivendo suona anche come il comportamento predefinito, quindi non sono sicuro del motivo per cui li vedresti tutti allineati in fondo. Ecco la parte che ho modificato, questo è stato solo per vedere come si sono comportati:

.left {
    background:red; height:50px;
}
.right {
    background:blue; height:70px;
}
.center {
    background:green; height: 30px;
}

Vedere qui: Violino aggiornato