Dynamische Divs - aber wie?

[Apes]

Hallo zusammen,

ich sitz gerade total auf dem Schlauch und klick mich schon siet einer geschlagenen Stunde durch das Netz um eine Lösung für mein Problem zu finden. Ich hoffe das ihr mir hier weiterhelfen könnt.

ich habe ein div in der größe von 1240px x 800px.
In diesem div sind wieder zwei divs nebeneinander.

Folgendes möchte ich erreichen. Wenn das rechte Div da ist, bzw. mit Inhalt befütter ist soll das linke div nur noch 50% bzw. 620px breit sein.
Ist das rechte Div aber leer, soll das linke Div 100% bzw. 1240px breit sein.

Wie zum Geier stell ich das an?

für eure Hilfe bedanke ich mich jetzt schon.

cya
Apes

 

[threadi]

Ich würde spontan sagen

#rechts { float: right;min-width: 50%; }

sollte klappen?

 

[mermshaus]

Der Kontext zu der Frage würde mich interessieren. Ob ein div-Element „da ist“ oder nicht, muss irgendwo bestimmt werden. An derselben Stelle könnte im Zweifel auch bestimmt werden, dass das andere div-Element die halbe oder die gesamte Breite einnimmt.

 

[Apes]

Guten Morgen,

Also das mit

#rechts { float: right;min-width: 50%; }

hat leider nicht funktioniert. :(

Mein rechtes Div ist zwar da, aber das linke muss sich ja der Größe anpassen.


Nun zur Frage wo bestimmt wird ob ein Div da ist oder nicht.
In diesem Div werden 4 Module geladen. je nachdem ob die da sind oder nicht, soll sich die Breite des linken Divs anpassen.

hier mal eine Grafik dazu



Die Größe vom Rechten Div könnte ich ja eigentlich auch davon abhängig machen wie groß der Inhalt ist der geladen wird, aber wie mache ich das dann mit dem Linken?

 

[Apes]

Warum auch immer habe ich es geschafft.
Ich bin zwar noch nicht durchgestiegen wie ich das gemacht habe, aber es funktioniert. :-)

Vielleicht will es mir jemand erklären was ich da gemacht habe^^

hier mein Code:

.custommodul_1 {
    width: 310px; 
    height: 310px; 
    display:inline-block; 
    vertical-align: top;
}

.custommodul_1 p {
    margin: 0; 
    padding:0;
}


.custommodul_2 {
    width: 280px; 
    height: 280px; 
    display:inline-block; 
    vertical-aign: top;
    background-color: #008BD2;
    color: #ffffff;
    padding-top: 30px;
    padding-left: 30px;
}

.custommodul_2 p {
    margin: 0; 
    padding:0;
}


#main { 
    width: 1240px; 
    height: 620px;
}

#rechts { 
    float: right; 
    vertical-align: top;
}

#mitte { 
}

#frame_1 { 
    width: 620px;
    height: 310px;
}

#frame_2 { 
    width: 620px; 
    height: 310px;
}

#modul_1 {
    display:inline-block;
    vertical-align: top;
}

#modul_2 {
    display:inline-block;
}

#modul_3 {
    display:inline-block;
}

#modul_4 {
    display:inline-block;
}

custommodul_1 wird im Hintergrund modul 1, 3 und 4 zugewiesen.
custommodul_2 wird im Hintergrund modul 2 zugewiesen.

<div id="main">
    <div id="rechts">
        <div id="frame_1">
            <div id="modul_1"><jdoc:include type="modules" name="weku-pos1"/></div><div id="modul_2"><jdoc:include type="modules" name="weku-pos2"/></div>
        </div>
        <div id="frame_2">
            <div id="modul_3"><jdoc:include type="modules" name="weku-pos3"/></div><div id="modul_4"><jdoc:include type="modules" name="weku-pos4"/></div>
        </div>
    </div>
    <div id="mitte">mitte braucht keine css-angaben</div>
</div>