Comment arrêter <div>s de se déplacer les uns les autres avec flotteur défini?

Très simple CSS question que je n'ai pas été en mesure de trouver la réponse à ce jour:

Je suis en train de pondre une page avec deux div côté-à-côte sur une seule ligne (à l'aide d'float:left; float:right;) et puis un div en dessous d'eux. Le problème est que si la ligne du haut (défini comme un div en lui-même) est si large que l'espace entre les deux divs peut accueillir le bas de la div, le fond de la div se déplace vers le haut dans le haut de la ligne de la création de l'apparition d'une seule rangée de trois divs. Je ne sais pas si c'est clair ou pas, mais voici le code:

<div id="top div" style="width:400px;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

Donc, comme ci-dessus, depuis le sommet de la div a une 200px d'écart entre les deux sa gauche et à droite des éléments d'enfant, l'image dans le fond div glisse entre eux. Si je fais le haut de la div de largeur 399px qui n'arrive pas. J'ai essayé en utilisant le CSS "clair" de la propriété, mais qui ne résout pas le problème. J'ai toujours travaillé mon chemin autour de cette apparence-un comportement étrange dans un mauvais chemin, mais souhaitez trouver une meilleure pratique.

Toute aide ou d'orientation est grandement apprécié!

OriginalL'auteur Eric | 2010-02-03

  1. 14

    Utilisation overflow:auto sur la première div

    <div id="top div" style="width:400px;overflow:auto;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

    il sera la cause de la div conteneur à s'étendre sur le contenu de ses enfants et donc la suite div maintiendra son emplacement..

    parfait! merci beaucoup. Semble que ce devrait être le comportement par défaut depuis que j'ai fermé le haut de la div, mais je suis sûr qu'il y a une bonne raison. Merci!
    La valeur par défaut, comme w3 unis, est visible et c'est pourquoi il ne fonctionne pas .. w3.org/TR/CSS21/visufx.html#overflow

    OriginalL'auteur Gabriele Petrioli

  2. 5

    Essayer de les "effacer" attribut sur un nouveau div:

    <div id="top_div" style="width:400px;"> 
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div> 
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div> 
<div style="clear: both;" />
</div> 

<div id="bottom_div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>
    ou tout simplement ajouter un style="clear: both" attribut pour le bas de la div.
    cela a très bien fonctionné pour moi, j'ai juste ajouté le style clair pour le bas de la div comme Rimas suggéré!
    Hm, j'ai juste pris un autre coup d'oeil à ce. David Radcliffe, la réponse est en fait mieux, alors j'ai changé ma réponse en conséquence. Assurez-vous de comprendre la différence entre ces. Si vous n'avez que des Rimas suggéré, tout rembourrage sur la "top_div" sera ignoré, parce qu'il s'effondre. Si vous ajoutez un clair div conteneur, le remplissage de conteneurs auront l' (proably effet attendu).

    OriginalL'auteur mnemosyn

  3. 2

    Je voudrais ajouter un div pour effacer les flotteurs:

    <div id="top div" style="width:400px;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
<div style="clear:both;"></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

    OriginalL'auteur David Radcliffe

  4. 0

    Je pense que les suggestions ci-dessus concernant style="clear:both;" sont sur place. Cependant, je pourrais essayer d'ajouter que le style de votre "bas de ligne" div. Il pourrait vous faire économiser de l'ajout d'un nouveau div.

    OriginalL'auteur Upperstage

  5. 0

    J'espère que ses pas en retard mais j'ai eu le même problème et juste pensé que c'. A à voir avec le fond de la Div. Définir la hauteur et la largeur à 100% pour le bas de la div et de l'ensemble de débordement automatique sur le fond de la div. Maintenant, la div ne se déplace pas jusqu'à remplir l'espace.

    OriginalL'auteur Gabriel