2 Div Container mittig und variabel breit
Manchmal mag man 2 Div Container mittig haben, aber variabel breit. Hier eine kurze Anleitung und das HTML und CSS als free downwload.
- 2 Div Container mittig nebeneinander
Shaddowrider hatte eine Frage, wie man denn 2 Div Container mittig nebeneinander setzt und dann auch noch variabel breit sollten sie sein. Nach langem Probieren, machten ihm die Divs schon ganz kirre, meinte er. Nun dies zu wissen bedeutet bloß, dass man irgendwann vorher “fast kirre” geworden war, also es ist kein wirkliches Geheimnis. 
Da ich keine Angabe hatte in welches vorgefertigte HTML diese beiden Div Container hinein sollten, erstellte ich eine Grundgerüst des Box Models.
<div class="aussen"><!--Hauptbox--> <div class="innen1"><!--Innerer Boxrahmen--> <div class="box01"> <h1>Kategorie 1</h1> <p>Lore Ipsum</p> </div> <div class="box02"> <h1>Kategorie 2</h1> <p>Lore Ipsum</p><p>Lore Ipsum</p><p>Lore Ipsum</p><p>Lore Ipsum</p> </div> <br class="clear" /><!--Brechen der Floats um Höhe des Boxrahmens zu erhalten--> </div><!--Ende innen1--> </div><!--Ende aussen-->
Dieses Grundgerüst nutzte ich um es mit einem weiteren Div Container zu versehen, dieser wird dann die Inhalte haben. Einer fließt dabei nach rechts (float right) der andere nach links (float left). Dies erzeugt die Zentriertheit, wenn box01 und box02 gleich breit sind.
<div class="aussen"> <!--Hauptbox--> <div class="innen1"> <!--Innerer Boxrahmen--> <div class="box01"> <div class="box01a"> <!--Inhalt nach Belieben--> </div> </div> <div class="box02"> <div class="box02a"> <!--Inhalt nach Belieben--> </div> </div> <br class="clear" /> <!--Brechen der Floats um Höhe des Boxrahmens zu erhalten--> </div> <!--Ende innen1--> </div><!--Ende aussen-->
Das benötigte CSS zu 2 Div Container mittig und variabel breit
Ich habe alle Angaben zur Farbe weggelassen, nur die Strukturangaben und floats sind da. Wer sich sehr unsicher ist, ändert nur die Breite der Außenbox oder des Außencontainers. Sollten die beiden innersten Container im IE 6 nicht nebeneinander, sondern untereinander sein, deren Breite nur für den IE& schmaler machen.
.aussen { width: 1000px; text-align: center; padding: 10px; margin: 0 auto; min-width: 138px;/*Opera/Mozilla brauchen dies breite aenderbar*/} .innen1 {width: 100%;/* für IE Win */} .box01 {width: auto; min-width: 130px; margin-top: 10px; margin-right: 0.5em; margin-left: 0.5em; float: left; width: 47.4%; display: inline;} .box01a {float: right; text-align: left; width: auto;} .box01a img {display: inline; margin: 2px; padding: 2px;} .box02 { width: auto; min-width: 130px; margin-top: 10px; margin-right: 0.5em; margin-left: 0.5em; float: left; width: 47.4%; display: inline;} .box02a { float: left; text-align: left; width: auto;} .box02a img { display: inline; padding: 2px; margin: 2px;}
Das komplette Beispiel gibt es zu Studienzwecken einfach hier als Download. Viel Freude beim Erobern des Box Models und am Ergebnis.
- Free Download
- Download beim Klick auf die Schachtel
Basis Know-how CSS
Internetmarketing
zu : 2 Div Container mittig und variabel breit 
Rechtliches
Impressum
Klasse, vielen Dank! habe ich mal so benutzt und funktioniert tadellos.
nun die Krux an dem Boxmodell: warum ist es nicht möglich, auf dieser Basis einfach zwei weitere Boxen daneben zu setzen? bei vier Boxen muss offenbar wieder ein solcher kompletter css-Teil geschrieben werden wenn ich das richtig verstehe?
(ich komme aus der Tabellen-Fraktion, dort konnte ich klar strukturiert Spalten verwenden und diese teilen oder verbinden, ganz nach belieben…)
noch ein gewichtiger Nachteil (soeben bemerkt):
bei verkleinern des Browserfensters kleben die Boxen stur an ihrer Position und wandern nicht mit, so das im ungünstigsten Fall ein direkt in der Mitte platziertes Objekt gar nicht wahrgenommen wird
Hi Frank
wenn Du der Außenbox eine varibale Bteite in % gibst, dann wandern die Boxen auf mit,
1000px breit ist mein Beispiel, bei 1000px fixer Breite ist eben das Brwoserfenster egal, bei 70% nicht oder so
Du wolltest zwei Boxen nebeneinander, magst Du vier haben, dann kann ich das auch machen, aber dann müssen die *ganz innen* Boxen ein display:inline haben
lg
hallo mts (so hieß mal ne Gruppe..),
erst mal vielen vielen Dank für die Hilfe – und das kostenlos obwohl du dies ja wohl sonst professionell betreibst!
interessant wäre ein flexibles Gerüst, mit welchem ich je nach Bedarf 1-4 Boxen verwenden kann und diese noch zusammen je nach Bedarf alle links oder zentriert anzeige, z.B. für die Gestaltung solcher Dinge wie in der angehängten Website.
Hi hier kann man nichts in Kommentare anhängen und auch keinen Code posten-Sicherheitsfanatikerin ich bin
Sende mir eine Email über mein Formular und wenn ich antworte kannst mir einen Anhang senden …
lg
ich meinte eigentlich mit Anhang das Ausfüllfeld: Website hier unten drunter, da habe ich den Link reingetan….
ah…. gut ich habe heute eine lange Nacht, aber ich denke Morgen habe ich dann mal Zeit
lg
na klaro, nur keine Hektik – bin ja froh wenn du hilfst und werde also nicht drängeln…
WOW! Hätte ich mal eher hier geschaut, hätte ich viel Zeit gespart! Vielen Dank für die leicht verständliche Anleitung!