Positionnement Div Css float clear

**Ashgenesis** · 01/03/2007, 00h00

Bonsoir, désolé pour le titre je ne savais pas trop quoi mettre. J'ai donc un petit problème de positionnement de div. Un exemple est toujours plus parlant que des explications :
http://ashgenesis.free.fr/div/index.html
http://ashgenesis.free.fr/div/style.css

Donc, d'après l'exemple que je viens de fournir, je souhaiterais que les div data_left et data_right restent contenus dans le div_data et ne débordent pas. Un clear ne fonctionne pas car, dans ce cas, c'est tous le div data qui redescend en dessous du div menu. Un overflow fait à peu près ce que je souhaite, à la différence près c'est qu'il créé des barres de défilement et que je n'en veux pas. Si, je spécifie une hauteur supérieur à div data_left, alors, la représentation est conforme à ce que je souhaite, mais le problème, c'est que le contenu du div data_left est variable.
J'ai donc pensé que la meilleure solution serait de dire à div data_left et div data_right de rester dans div data sans déborder ou alors div data devra s'adapter à la hauteur de div data_right ou div data_left. Mais je ne vois pas comment le mettre en place.

Je précise que les margins couleurs bordures etc... disparaitrons après résolution du problème. C'est pour faciliter la mise en page

Toutes suggestions seraient appréciables Merci

**Bisûnûrs** · 01/03/2007, 08h58

Et si tu mets ça à la fin de ton div_data :

Code html :

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

<br style="clear:both" />

**Ashgenesis** · 01/03/2007, 13h10

Merci mais ca ne fonctionne pas, j'avais déjà essayé avec une astuce du genre

Code :

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

<div style="clear:both">&nbsp;</div>

En le rajoutant à la fin du div data, il ne se passe rien et si je le met juste apres en dehors du div data mais avant div footer alors ce dernier se retrouve à commencer au niveau de la fin du menu. Pour illustrer le résultat voir
http://ashgenesis.free.fr/div/indexbr.html

Merci pour votre suggestion

**Bisûnûrs** · 01/03/2007, 13h39

Tu as ça :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id='data'>
   <h1>div data</h1>
   <div id='data_left'>
      ...	
   </div>
   <div id='data_right'>
      ...
   </div>
</div>
<br style="clear:both" />

Il faut faire ça :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id='data'>
   <h1>div data</h1>
   <div id='data_left'>
      ...	
   </div>
   <div id='data_right'>
      ...
   </div>
   <br style="clear:both" />
</div>

**Ashgenesis** · 01/03/2007, 13h53

J'ai effectué le test en rajoutant votre commande dans le div mais il n'y avait aucun changement c'est pourquoi je l'avais sorti du div data

et là le changement effectué était que le footer arrivait en dessous du menu.

En reprenant votre solution, il n'y a aucun changement apparent voir http://ashgenesis.free.fr/div/indexbr.html que je viens de remodifier.

Merci

**Bisûnûrs** · 01/03/2007, 14h04

Pourtant ce code fonctionne bien :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
   <title>essai</title>
</head>
<body>
   <div style="background:#f00">
      <div style="float:left;height:400px;width:200px;background:#ff0">
      </div>
      <div style="float:left;height:200px;width:200px;background:#0f0">
      </div>
      <br style="clear:both" />
   </div>
</body>
</html>

Donc il doit y avoir une déclaration dans ton code qui gêne cette solution de s'appliquer correctement ...

**Ashgenesis** · 01/03/2007, 14h43

Oui, tout à fait, d'ailleurs j'ai utilisé un code similaire pour un site. Ce qu'il y a là, c'est qu'il faut prendre aussi en compte le fait que le menu à gauche soit lui aussi en float left.

Je me suis aperçu d'un oubli dans le style ce qui permet d'avancer un peu, maintenant le footer est bien aligné à gauche au bon endroit. Mais il y a encore ce problème de débordement des div data_left et data_right tous deux contenus dans div data.

**radimby** · 02/03/2007, 10h20

Je pense que tu testes sous FF car sous IE6 c ok.

Voici une solution pour ton pb :
Dans ton fichier CSS tu as :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#data{
	float : left;
	background-color: blue;
	color: black;
	width: 98%;
	padding: 10px;
	border : 3px solid yellow;
	height: 200px;
	margin: auto;
}

sous FF si tu specifie la hauteur d'une div, alors son contenu se deborde, donc il faut supprimer ce style, soit si tu veux avoir une hauteur minimale, donc il faut rajouter le code ci dessou dans le fichier css en gardant le style "height:200px;" :

Code :

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

1
2
3
4
5
 
html>body div#data { /* pour les browser non-IE*/
	height:auto;
	min-height:200px;
}

Finalement ton code sera :

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
 
#data{
	float : left;
	background-color: blue;
	color: black;
	width: 98%;
	padding: 10px;
	border : 3px solid yellow;
	height: 200px;
	margin: auto;
}
 
html>body div#data { /* pour les browser non-IE*/
	height:auto;
	min-height:200px;
}

Après tu peux mettre la div avec clear:both

Code :

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

1
2
3
4
5
6
7
 
<div id="data">
  ...
  <div id="data_left">...</div>
  <div id="data_right">...</div>
  <div style="clear:both">&nbsp;</div>
</div>

**Ashgenesis** · 02/03/2007, 14h19

Impeccable, merci c'était bien le height mon erreur en fait je l'avais rajouté pour quelques tests sachant que je n'en avais pas forcement besoin mais j'ai oublié de le retirer maintenant que ca fonctionne nickel sous FF et ie6 d'apres ce que tu me dis ben c'est du tout bon

Et il manquait aussi cette fameuse partie pour FF

Encore merci à tous.

Positionnement Div Css float clear

Positionnement en CSS

Discussions similaires

Partager

Partager