Positionnement Div Css float clear

Version imprimable

01/03/2007, 00h00
Ashgenesis

Positionnement Div Css float clear

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 :D

Toutes suggestions seraient appréciables Merci ;)
01/03/2007, 08h58
Bisûnûrs

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

Code:

<br style="clear:both" />

:question:
01/03/2007, 13h10
Ashgenesis

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

Code:

<div style="clear:both"> </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 ;)

Tu as ça :

Code:

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:

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>

01/03/2007, 13h53
Ashgenesis

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 ;)

Pourtant ce code fonctionne bien :

Code:

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 ...

01/03/2007, 14h43
Ashgenesis

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.

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:

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:

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

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:

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

02/03/2007, 14h19
Ashgenesis

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.