Problema com o alinhamento da div, 3 divs na mesma linha horizontalmente

Question

Estou tentando melhorar minhas habilidades no CSS e estou tendo alguns problemas. Eu quero alinhar 3 divs na mesma linha, começando na parte superior da div container. Consegui deixá -los alinhados horizontalmente, mas eles não estão exibindo no topo. Parece que eles estão todos alinhados com o fundo que eu não consigo descobrir. Alguém pode me apontar na direção certa sobre como fazer os divs não ter margem e (flutuar?) Para o topo?

Tentei declarar as margens, mas não tive muita sorte. Além disso, isso será em uma visão parcial através do MVC, portanto, a configuração do contêiner como absoluto pode não ser uma opção, pois a altura da parte superior da página estará mudando.

Aqui está um Jfiddle E também anexei meu código, HTML e CSS, juntamente com o que está sendo renderizado no meu navegador.

Obrigado!

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

Abaixo está o que está sendo renderizado:

Answer 1

é por causa de suas caixas de seleção. Basta colocá -los após os três Divs de conteúdo.

<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

Você deve ter algo mais acontecendo lá, porque quando eu modifiquei seu violino para fazer o item dividir diferentes alturas, eles alinharam da maneira que você parece querer que eles o fizessem. O que você está descrevendo também soa como o comportamento padrão, então não sei por que você estaria vendo todos eles alinhados ao fundo assim. Aqui está a parte que eu modifiquei, isso foi apenas para ver como eles se comportaram:

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

Veja aqui: Violino atualizado