2 Divs nebeneinander anordnen, 1. Div 100 % width

weswesx

Hallo Community,

habe gerade folgendes Problem: Ich muss einen Maincontent und ein bannerdiv nebeneinander anordnen.
Nun soll der Maincontent die Möglichkeit haben sich wenn der rechte Bannerdiv auf z.B Unterseiten weg fällt, auf die komplette Breite auszubreiten.

Kann mir hiermit jemand weiterhelfen ?

Vielen Dank im voraus

Bandit

Zitat von weswesx

Kann mir hiermit jemand weiterhelfen?

Bestimmt kann das jemand. Und damit wäre deine Frage korrekt beantwortet. Was hast du denn bisher versucht?

weswesx

Bisher mir alles nur erdenkliche:(
Die letzte Variante wo ich nun haben ist das erste Div mit width:100%; das 2 mit seiner festen breite und dem ersten div die breite des 2. als margin zu geben.
Funktioniert auch bis zu dem Punkt wo das 2. div verschwindet und das 1 sich nicht auf die Komplette Breite ausbreitet, da es ja noch das Margin hat.

Nun meine Frage: Wie kann ich das in CSS umsetzten ?

Viele Grüße

explanator

Für alle modernen Browser:

HTML

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset=UTF-8>
<title>Beispiel</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <article>
        Hauptinhalt
    </article>
    <aside>
        Banner
    </aside>
</body>
</html>

Alles anzeigen

Code

/* CSS */
* {margin:0;padding:0;}
html, body {height:100%;}
body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    }


article {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
     align-self: auto;
    background-color:blue;
    }


aside {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 200px;
    -ms-flex: 0 1 200px;
    flex: 0 1 200px;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    background-color:red;
    }

Alles anzeigen

Tags