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

**steph68b** · 02/02/2016, 20h32

Hello,

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

J'ai cette structure:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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(?)!

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?

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Invité · 02/02/2016, 21h30

Bonjour,

Oublie <br clear="both" /> !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**steph68b** · 03/02/2016, 11h23

Ok, merci, vais jeter un oeil au glossaire.

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

CSS

Discussions similaires

Partager

Partager