2 Div Container mittig und variabel breit

2 Div Container mittig nebeneinander
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 eine Schachtel mit dem Pfeil nach unten
Download beim Klick auf die Schachtel
Weitersagen ausdrücklich erwünscht 😉

Ebenfalls informativ und lesenswert

12 Kommentare zu “2 Div Container mittig und variabel breit

  1. Frank S

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

  2. Frank S

    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

  3. mts

    Hi Frank
    wenn Du der Außenbox eine varibale Bteite in % gibst, dann wandern die Boxen auch 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

  4. Frank S

    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.

  5. mts

    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

  6. Frank S

    ich meinte eigentlich mit Anhang das Ausfüllfeld: Website hier unten drunter, da habe ich den Link reingetan….

  7. mts

    ah…. gut ich habe heute eine lange Nacht, aber ich denke Morgen habe ich dann mal Zeit 😉

    lg

  8. Frank S

    na klaro, nur keine Hektik – bin ja froh wenn du hilfst und werde also nicht drängeln…

  9. Daniel H

    Eine schöne, nachvollziehbare Anleitung, die einiges an Tüftelei eingespart hat, Danke!

    Und Kompliment: Eine tolle Idee, hinter den Quellcode Karopapier als Background zu legen. Das merke ich mir 🙂

    marbleheaters.co.uk

  10. Achim Loobes

    Mit DIVs habe ich auch manchmal so meine Problem, man tüftelt und probiert, aber nicht immer ist das Ergebnis, was man sich wünscht. Schon gar nicht in den verschiedensten Browser. Jedenfalls ein großes DANKE, den Code werde ich auch mal ausprobieren, habe schon länger nach einer Lösung gesucht und überhaupt, dies ist eine informative Webseite. 🙂

  11. Adam

    „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 …“

    Irgendwie schade: Eine Menge toller Beiträge und vorgestellter Lösungshinweise, weshalb aber so viele Rechtschreibfehler – im obigen kleinen Beispiel allein 4 -, auch noch x Jahre nach der Erstellung? Jeder Fünftklässler würde dafür von seinen Lehrern „schief“ angeschaut. Dass beim schnellen Schreiben mal so was passiert; OK, aber man sollte – gerade als WEBDESIGNER doch einen kritischen Blick haben auf das, was man „für alle Ewigkeiten“ im Web so hinterlässt. Oders anders: Ein wenig mehr QS in eigenen Dingen … Wäre ich potentieller Kunden-Interessent, würde ich mir die Frage stellen, wie gewissenhaft die Auftragnehmerin für mich arbeiten würde, wenn sie es bei den eigenen Dingen, mit denen sie im Web für sich wirbt, offenbar nicht so genau nimmt. Und von Quellcode etc. habe ich als Handwerker keine Ahnung, da muss ich mich darauf verlassen können, dass die Auftragnehmer sorgfältig arbeiten. Beim Blick auf die Webseiten vieler sich im Web darstellender IT-/Web-Experten fällt mir auf, dass viele sich zwar mit tollen Attributen beschreiben und mir, als möglichem Kunden Ratschläge geben, auf was ich bzgl. Internetwerbung alles achten muss etc., aber viele dieser Leute/Firmen nehmen es mit der Präzision der schriftlichen Darstellung nicht so genau, da wimmelt es von Fehlern (Rechtschreibfehlern, inhaltlichen, linkmäßigen etc.). Und wenn man diese „Experten“ dann mal freundschaftlich auf ihre im Web nachzulesenden Schwächen hinweist, reagieren viele – besonders deutsche – schnell beleidigt und gereizt. Und toll auch die Haftungsausschlüsse. Als Handwerker haben wir es da nicht so gut. Wir können nicht sagen, wir „meinen“, wir haben sorgfältig gearbeitet, wenn aber dennoch Fehler passiert sind, haften wir dafür nicht …
    Grüsse T. Adam

  12. mts

    Wie ich immer zu sagen pflege: der eine kann fantastisch rechtschreiben, der andere nicht, der eine ist ein Programmierer der andere nicht. Wenn der Programmierer ständig den anderen ihre Unfähigkeit vor Augen hielte, würd er verachtet, die die Rechtschreiben können, dürfen ungestraft andere niedermachen, sich gar beschweren, dass die Hilfetutorials nicht perfekt geschrieben sind.

    Schade, dass nur eine Gabe zählt, alle anderen sich ihr anpassen müssen und minderwertiger zu sein scheinen.