Zwei Divs nebeneinander, eins soll unter das andere rutschen

B

ByeBye 251003

Hallo,

wie schaffe ich es, dass das div mit dem Text (wird der Browser schmaler gezogen oder für kleine Handydisplays), ab einer bestimmten Breite (des divs mit dem Text) automatisch unter das linke div mit den Bildern rutscht (also unterhalb des linken Divs, nicht überlappend)? Aktuell bleiben beide nebeneinander stehende divs nebeneinander stehen, zieht man den Browser schmaler und das rechte div (mit dem Text) wird einfach nur sehr schmal, bis man dort nichts mehr lesen kann ... Vielen Dank dafür.

HTML:
<div style="width:100%;">

<div style="width:255px;float:left;">
<div><img style="width:250px;height:188px;background-color:#ffff00;margin-bottom:5px;" /></div>
<div><img style="width:250px;height:188px;background-color:#ffff00;" /></div>
</div>

<div style="background-color:#EEF1D9;margin-left:265px;margin-right:14px;padding:14px;">Irgend ein Text</div>

<div style="clear:both"></div>

</div>
 
such mal bei googel unter @media queries . Das nutzt man in der CSS und sollt dir dabei helfen
 
Prima, ich danke dir. So gehts:

HTML:
<style>
@media (min-width:600px) {
  div#AA {float:left;}
  div#BB {margin-left:265px;}
}
</style>

<div style="width:100%;">

<div id="AA" style="width:255px;">
<div><img style="width:250px;height:188px;background-color:#ffff00;margin-bottom:5px;" /></div>
<div><img style="width:250px;height:188px;background-color:#ffff00;margin-bottom:5px;" /></div>
</div>

<div id="BB" style="background-color:#EEF1D9;margin-right:14px;padding:14px;">Irgend ein Text</div>

<div style="clear:both"></div>

</div>
 
Ich würde dir empfehlen CSS nicht in die HTML Tags und in der HTML Datei zuschreiben sondern in eine externe Datei auszulagern:
HTML:
<link href="/pfad/zum/css/style.css" rel="stylesheet" type="text/css">
Das bindest du oben im head ein und schreibst in der Datei dann das CSS für die Seite rein , dann kannst du das Design in jeder anderen html seite benutzen indem du es einfach einbindest
 
Zurück