2 Div Container mittig und variabel breit

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>

Lore Ipsum
</div>
<div class="box02">
<h1>Kategorie 2</h1>

Lore Ipsum

Lore Ipsum

Lore Ipsum

Lore Ipsum
</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

Weitersagen ausdrücklich erwünscht

Abonnieren: Bücher, die ich empfehle:
CSS und HTML
Internetmarketing

2 Div Container mittig und variabel breit
vom 29.06.08 in CSS.  

Top

Bis jetzt gibt es 8 Beiträge zu
“2 Div Container mittig und variabel breit”

Kommentare lesen ».

« der ganz alltägliche Wahnsinn - oder mich gibt es –noch || Traue keinem - Social Bookmark Dienst - alles weg bei Yigg.de»