[QT] Two Div-Containers Side by Side

Ein Problem, das sich immer wieder einmal stellt. Man hat zwei Dinge, die man nebeneinander stellen will aber der Mist will sich einfach nicht nebeneinander anordnen. Zumindest ging es mir immer so.
Mit diesem Trick funktioniert es allerdings immer.

A problem I faced pretty often. You have to containers you wanna have next to each other but that crap just doesn't word. At least that's what I experienced.
But with this trick, it always works.



Okay. Das Grundübel liegt im Markup. Das Geheimnis liegt darin, die beiden Container innerhalb eines anderen Containers zu platzieren und einen sogenannten clearfix hinzuzufügen. Einen div-Container, der sozusagen unser Schutz ist, gegenüber dem ganzen Rest, damit es uns nicht das ganze Layout zerschiesset.

The main problem lies in the markup. The secret is to actually place the containers inside of another one and adding a clearfix-container to prevent the floating we're going to apply from ruining the rest of our layout.

<div class="cont">
<div class="one"></div>
<div class="two"></div>
<div style="clear: both;"></div>
</div>

Danach ist der rest ein Kinderspiel. Wir brauchen bloss die Breiten der Container anzugeben (und dabei etwas Mathekenntnisse, wenn die beiden nicht nebeneinander im Container platz haben, sind sie logischerweise nicht nebeneinander) Die CSS sieht so aus:

The rest is very simple. Just give your containers some widths (and please do a bit of math, if the two divs are wider than your container they're not gonna fit next to each other) CSS looks like this:

.cont {
   width: 90%;
   margin-left: 5%;
   height: 300px;
   background: #aaa;
}

.one, .two{
   width: 48%;
   height: 300px;
   background: #444;
   float: left;
}

.one{
   margin-right: 4%;
}

Und dann haben wir schon unseren Container (gleich funktionert das übrigens auch mit mehr als nur zwei Containern :)

And there you have it. Contianers next to each other. It actually works the same with more than two containers. :)

Edit

Und da hat mir Oliver mal wieder mitgeteilt, dass es noch einfacher geht.

And there I learned there's an other possibility