div, float & <br clear="both" />

Hello,

Petite question technique qui me turlupine..........

J'ai cette structure:
Code:

1 2 3 4 5 6 <body> <div id="site"> <div id="main"> affichages divers </div> <div id="connect"> affichages divers </div> </div> </body>
Avec pour but de mettre côte à côte main (70%) et connect(30%): ok!
J'ai donc utilisé float: left: ok!

Sauf que......... je ne comprenais pas pourquoi, en faisant ça et main et connect sortaient de site, du coup, pour se retrouver en dessous(?)! :weird:
J'ai fait des recherches en ligne et j'ai trouvé une "solution": <br clear="both" />

Mais, la raison était plutôt très floue, pas claire en fait.......

Donc:
1.) est ce que qq'un peut m'expliquer:

- pourquoi le float left provoque ça (une sortie du div parent)?
- et pourquoi le br clear both le règle? 1ère fois que je vois un argument à un <br/> d'ailleurs...

2.) sinon, y a t-il un autre moyen de mettre mes 2 div côte à côte? :roll:

CSS
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 #site { background-color : white; position:relative; text-align : left; margin : 20px auto 0 auto; border: 2px solid grey; box-shadow: 1px 1px 40px grey; border-radius: 10px 10px 10px 10px; width : 75%; } #main { margin-left : auto; margin-right : auto; text-align : left; overflow : auto ; float : left ; width: 70%; } #connect { font-weight: bold; font-size: 1.1em; width : 25%; float: left; margin: 50px 5px 5px 5px; }
Merci. ;)

Bonjour,

Oublie <br clear="both" /> ! :lol:
Code:

1 2 .clearfix:before, .clearfix:after { display:table; content:""; } .clearfix:after { clear:both; }
Code:

1 2 3 4 5 6 <body> <div id="site" class="clearfix"> <div id="main"> affichages divers </div> <div id="connect"> affichages divers </div> </div> </body>
Quant au float:left ou right : Glossaire des propriétés CSS - VI-B. Positionnement
L'élément "sort" du flux "normal" de la page.

class="clearfix" sur le parent le rétablit dans le flux.

Ok, merci, vais jeter un oeil au glossaire. ;)