[html/css] Drei Boxen nebeneinander

[Luckie]

Hallo,
ich versuche gerade drei Boxen mittels div nebeneinander zu bekommen:
HTML:

Code:

      <div class="bottom">
      <div class="bottomleft">

      </div>
      <div class="bottomcenter">
      
      </div>
      <div class="bottomright">
      
      </div>
      </div>

CSS:

Code:

.bottom {
   width: 75%;
   margin-left:auto;
   margin-right:auto;
   padding-top: 10px;
}

div.bottomleft{
   float: left;
   width: 30%;
   padding: 5px;
   border: 1px solid #aaaaaa;
}

div.bottomcenter {
   margin-left:auto;
   margin-right:auto;
   width: 30%;
   padding: 5px;
   border: 1px solid #aaaaaa;
}

div.bottomright {
   float: right;
   width: 30%;
   padding: 5px;
   border: 1px solid #aaaaaa;
}

Das klappt fast. Die dritte, rechte Box ist nach unten versetzt, was natürlich nicht sein soll. Wie bekomme ich die dritte Box auch auf die gleiche Höhe, wie die anderen.

http://www.michael-puff.de/Privat/Dev/XPUsermanager/

[Phoenix]

Alle drei boxen die gleiche CSS Klasse:
Diese machst Du float left und hältst den Abstand mit einem entsprechenden aussenabstand.
Danach noch eine leeres div mit clear:both.
Das alles in einen Container mit fester breite und gut ist.

[Luckie]

Äh, bitte wie? das war etwas schnell für mich. Könntest du mir da ein Beispiel machen? Wäre nett.

[Phoenix]

Wenn ich daheim bin :)

[Bernerbaer]

ich habs so verstanden:

Code:

div.bottom {
   width: 75%;
   margin-left:auto;
   margin-right:auto;
   padding-top: 10px;
}

div.bottom1{
   float: left;
   width: 31%;
   padding: 5px;
   margin:5px;
   border: 1px solid #aaaaaa;
}

und der Html-Code

Code:

<div class="bottom">
      <div class="bottom1">
         links<br />
      </div>

      <div class="bottom1">
        mitte<br />  
      </div>

      <div class="bottom1">
         rechts<br />
      </div>
</div>

[edit] ach ja das <div style="clear:both"> habe ich vergessen kommt noch vor dem letztem div [/edit]

[Luckie]

Jetzt ist die dritte Box unter der mittleren. ;)

[Bernerbaer]

ich habs nicht getestet, sollte eigentlich funktionieren. Versuche mal die Breite der Boxen zu verkleinern, oder den Margin zu verkleinern

[Luckie]

Ah, danke. Jetzt passt es.

[Florian Hämmerle]

ohne Testen jetzt einfach mal so:

CSS:
display: inline-block;
width: DEINEBREITE;

das dürfte auch klappen.

mfg Florian