Ergebnis 1 bis 6 von 6
  1. #1
    Reseller
    Registriert seit
    30.04.2002
    Beiträge
    572

    Frage Zwei DIVs nebeneinander / nach Umbruch volle Breite

    Hallo Zusammen,

    ich halte mich schon selber für verrückt, und stehe gerade ziemlich auf dem Schlauch - könnt Ihr mir weiterhelfen?

    Ich möchte zwei Container/DIVs nebeneinander platzieren. Beide zusammen sollen über die gesamte Breite laufen (100%) - sagen wir in einem Verhältnis 60:40%. Der kleinere Container hat eine min-width.

    Wenn ich das Browserfenster nun kleiner ziehe, werden die beiden Boxen im Verhältnis auch immer kleiner. Klar.
    Aber wenn die Größe des kleineren DIVs für die min-width nicht mehr ausreicht, soll dieses DIV umgebrochen werden/nach unten rutschen UND (jetzt kommt's was ich nicht hinkriege) das andere DIV die volle verfügbare Breite ausnutzen. Meinetwegen können sogar beide DIVs auf die volle Breite ausspannen.

    Das ganze soll ohne Mediaqueries funktionieren!

    Ist das simpel? Ich krieg's nicht hin... Hab schon alles versucht mit floaten und flexen, aber das die Container nach dem Umbruch auf die volle Breite aufspannen bekomme ich nicht hin...

    Habt ihr eine Lösung?

    Danke im Voraus!

    Gruß,
    Tom

  2. #2
    Forenexperte² (Reseller) Avatar von Enigma
    Registriert seit
    20.07.2001
    Beiträge
    17.783

    AW: Zwei DIVs nebeneinander / nach Umbruch volle Breite

    Meinst Du so?

    PHP-Code:
    <!doctype html>
    <
    html lang="de">
    <
    head>
        <
    meta charset="UTF-8">
        <
    meta name="viewport" content="width=device-width, initial-scale=1.0">
        <
    meta http-equiv="X-UA-Compatible" content="ie=edge">
        <
    title>Test</title>

        <
    style>
            * {
                
    margin0;
                
    padding0;
                
    box-sizingborder-box;
            }
            
    body {
                
    padding30px 40px;
            }
            .
    flex-container {
                
    displayflex;
                
    flex-wrapwrap;
                
    margin-10px;
            }
            .
    flex-item {
                
    margin0 10px 10px;
                
    padding10px;
            }
            .
    flex-item-bigger {
                
    flex-grow3;  /* 60% width */
                
    flex-basis300px;  /* min-width */
                
    background#f99;
            
    }
            .
    flex-item-smaller {
                
    flex-grow2;  /* 40% width */
                
    flex-basis200px;  /* min-width */
                
    background#99f;
            
    }
        </
    style>
    </
    head>

    <
    body>
        <
    div class="flex-container">
            <
    div class="flex-item flex-item-bigger">Größerer<br />
                
    Container</div>
            <
    div class="flex-item flex-item-smaller">Kleinerer<br />
                
    Container</div>
        </
    div>
    </
    body>
    </
    html
    Statt min-width habe ich flex-basis benutzt, was sich aber genauso auswirkt (vermutlich würde min-width genauso gehen, hab's nicht probiert). Wichtig ist, dass Du entsprechend auch eine flex-basis für den größeren Container vergibst, damit bis zum Umbruch das Breitenverhältnis erhalten bleibt; sonst wird recht schnell der eigentlich breitere Container schmaler als der eigentlich schmalere.

    Vergiss nicht, noch die Vendor-Prefix-Versionen der Flexbox-Eigenschaften hinzuzufügen; ich habe hier nur die Standard-Eigenschaften genutzt.

    Gruß,
    Jan
    Two hours of trial and error can save ten minutes of manual reading.

  3. #3
    Reseller
    Registriert seit
    30.04.2002
    Beiträge
    572

    AW: Zwei DIVs nebeneinander / nach Umbruch volle Breite

    Hallo Jan,

    ich probiere es gleich morgen aus! Vielen Dank schon mal für Deine Hilfe - wäre ja klasse, wenn das so klappt und ich wieder was dazugelernt habe! :-)

    Schönes Restwochenende erst mal - ich melde mich morgen wieder!

    Grüße
    Tom

  4. #4
    Forenexperte² (Reseller) Avatar von Enigma
    Registriert seit
    20.07.2001
    Beiträge
    17.783

    AW: Zwei DIVs nebeneinander / nach Umbruch volle Breite

    Zitat Zitat von PHP-Tom Beitrag anzeigen
    ich probiere es gleich morgen aus!
    Ich bin von morgen früh bis Dienstag Abend unterwegs und kann zwar antworten, aber vermutlich nichts ausprobieren (habe nur Smartphone und Tablet mit und zudem wenig Zeit).

    Gruß,
    Jan
    Two hours of trial and error can save ten minutes of manual reading.

  5. #5
    Reseller
    Registriert seit
    30.04.2002
    Beiträge
    572

    AW: Zwei DIVs nebeneinander / nach Umbruch volle Breite

    Es klappt!!!! GENAU SO hatte ich mir das vorgestellt und ich war mir sicher, dass das auch technisch möglich ist - bin nur leider nicht drauf gekommen...

    Danke Dir für Deine Mühen und die sehr schnelle Hilfe! Hast was gut bei mir! :-)

    Wünsche eine sonnige Woche!

    Tom

  6. #6
    Forenexperte² (Reseller) Avatar von Enigma
    Registriert seit
    20.07.2001
    Beiträge
    17.783

    AW: Zwei DIVs nebeneinander / nach Umbruch volle Breite

    Prima, es freut mich, dass es klappt.

    Gruß,
    Jan

Ähnliche Themen

  1. Typo3: style bei DIVs im RTE
    Von athlon im Forum TYPO3
    Antworten: 1
    Letzter Beitrag: 21.08.2009, 13:40
  2. CMS nebeneinander
    Von hamada im Forum Mambo
    Antworten: 5
    Letzter Beitrag: 09.08.2005, 00:03
  3. Positionierung von divs
    Von rabe im Forum HTML / SSI / Webdesign
    Antworten: 18
    Letzter Beitrag: 18.07.2005, 14:17
  4. Umbruch nach Bild in <td>
    Von A. Utz im Forum Scriptsprachen / SQL / Anwendungen
    Antworten: 1
    Letzter Beitrag: 25.08.2004, 11:36

Lesezeichen

Lesezeichen

Berechtigungen

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