Probleme avec les div

Bonjour tout le monde je suis en cours de developpement d'un site , mon probleme et le suivant :


http://img11.hostingpics.net/thumbs/...58Capture1.png
c'est la page de test , mais apres avor ajouter du contenu a la div "#connexion"
la page deviens comme cela :s :

http://img11.hostingpics.net/thumbs/...26Capture2.png
et si j'ajoute du contenu a la div "#anonce" elle devien comme ca :s quelqu'un pourrait m'aider a résoudre le probleme et merci :)
http://img11.hostingpics.net/thumbs/...92Capture3.png
Voici le code CSS de la page :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

#div2 { width: 48%; border: 1px solid #00F; margin-right: 1em; border-radius: 1em   #div1 { width: 46%; border: 1px solid #F00; margin-right: 1em; border-radius: 1em;   #anonce { border: 1px solid #903; overflow: auto; margin-right: 1em; border-radius: 1em; }   #connexion { width: 10em; float: left; margin-right: 1em; margin-left: 1em; border: 1px solid #333; border-radius: 1em; padding-right: 0.313em; padding-left: 0.313em;     #ajout { border: 1px solid #CF0; width: 10em; margin-top: 1em; margin-left: 1em; padding-right: 0.313em; padding-left: 0.313em; margin-right: 1em; float: left; border-radius: 1em; }

---

je voudrais lorsqu'il y'aurais du contenu dans la div "#connexion" seul la parti "#ajout " qui se pousse cela est-il possible et merci encore :).

et merci infiniment pour votre aide :).

Bonjour,
ton code CSS ne nous sert à rien si tu ne montres pas aussi le code html associé (l'imbrication des <div>).

=> Div et CSS : une mise en page rapide et facile

Sur le principe, il faut faire :
-> #colgauche : une colonne à gauche, contenant #connection et #Ajout
-> #coldroite: une colonne à droite, contenant #annonce, #div1 et #div2

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div id="colgauche"> <div id="connecion"> [...] </div> <div id="Ajout"> [...] </div> </div>   <div id="coldroite"> <div id="annonce"> [...] </div> <div id="div1"> [...] </div> <div id="div2"> [...] </div> </div>

---

et le CSS :

Code:

---

1 2 3 4 5 6 7 8 9

#colgauche { float:left; width:25%; } #coldroite { float:left; width:75%; }   #connection { clear:both; width:100%; } #Ajout { clear:both; width:100%; }   #annonce { clear:both; width:100%; } #div1 { float:left; width:50%; } #div2 { float:left; width:50%; }

---