Ergebnis 1 bis 4 von 4

Thema: 2 Divs nebeneinander anordnen, 1. Div 100 % width

  1. #1
    HTML Newbie
    Registriert seit
    15.04.2013
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage 2 Divs nebeneinander anordnen, 1. Div 100 % width

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard AW: 2 Divs nebeneinander anordnen, 1. Div 100 % width

    Zitat Zitat von weswesx Beitrag anzeigen
    Kann mir hiermit jemand weiterhelfen?
    Bestimmt kann das jemand. Und damit wäre deine Frage korrekt beantwortet. Was hast du denn bisher versucht?

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    15.04.2013
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: 2 Divs nebeneinander anordnen, 1. Div 100 % width

    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

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: 2 Divs nebeneinander anordnen, 1. Div 100 % width

    Für alle modernen Browser:
    HTML-Code:
    <!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>
    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;
        }

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 03.03.2013, 21:25
  2. DIV nebeneinander anordnen?
    Von Niclas im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 21.02.2013, 23:06
  3. divs anordnen
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 28.01.2011, 13:10
  4. Divs anordnen
    Von derano im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 24.08.2007, 23:49
  5. divs anordnen
    Von 00eraser00 im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 14.08.2007, 15:30

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •