Problem mit DIV-Ausrichtung, 3 Divs gleiche Zeile horizontal - CSS, Google-Chrome, Internet-Explorer-7

Ich versuche meine CSS Fähigkeiten zu verbessern und bin es auchProbleme haben. Ich möchte 3 DIVs auf der gleichen Zeile ausrichten, beginnend an der Spitze des Containers div. Ich konnte sie horizontal ausrichten, aber sie werden nicht oben angezeigt. Es scheint so, als ob sie sich alle auf den Boden ausrichten, den ich nicht herausfinden kann. Kann mir jemand in die richtige Richtung zeigen, wie ich die Divs dazu bringen kann, keinen Rand und (float?) Nach oben zu haben?

Ich habe versucht, die Ränder zu deklarieren, habe es aber nicht getanviel Glück. Auch dies wird in einer Teilansicht durch MVC sein, daher ist die Einstellung des Containers auf absolut möglicherweise keine Option, da sich die Höhe von dem oberen Rand der Seite ändert.

Hier ist ein JFIDDLE und ich habe auch meinen Code, sowohl HTML als auch CSS, zusammen mit dem, was in meinem Browser gerendert wird, angehängt.

Vielen Dank!

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

Unten ist was gerendert wird:

Antworten:

Es ist wegen Ihrer Checkboxen. Platziere sie einfach nach den drei Content-Divs.

<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>

Da muss etwas anderes los sein,weil, wenn ich deine Fiedel änderte, um das Item divs zu verschiedenen Höhen zu machen, reihten sie sich so ein, wie du es zu haben scheinst. Was du beschreibst, klingt auch wie das Standardverhalten, also bin ich mir nicht sicher, wieso du sie alle so nach unten ausgerichtet sehen würdest. Hier ist das Bit, das ich modifiziert habe, das war nur um zu sehen, wie sie sich verhielten:

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

Siehe hier: Aktualisierte Geige