Float et <div> conteneur considéré comme vide

WRInaute accro
Salut,

Quand vous avez cette situation :

Code:
<div id="localisation">
		<p id="ariane">Accueil du site</p>
		<p id="proposer">Je vote pour ce site !</p>
	</div>

Avec pour CSS :
Code:
#localisation{
font-weight:bold;
margin-bottom:25px
}

#ariane{
height:1em;
float:left;
color:#444
}

#proposer{
float:right;
color:#f23db0
}

Comment faites vous pour que le bloc LOCALISATION ne soit pas considéré comme vide ?
Je m'explique, avec les float, left et right, Firefox considère que le bloc Localisation n'a rien dedans. La preuve en est que si je ne lui attribue pas une hauteur (exemple : 30px) il ne m'affiche pas le background or normalement, vu qu'il y a deux <p> dans ce block, il devrait être considéré comme rempli par ces deux <p> non ?

Je m'en arrache les cheveux merci pour votre aide.
 
WRInaute discret
Salut,

Si tu ajoutes overflow:auto; sur localisation, ça change quelquechose ?
Sinon, si tu veux afficher un background, met comme hauteur en ton DIV la taille du fond ?
 
WRInaute accro
Merci ça ne change rien d'autant plus que l'overflow sert à pouvoir avoir un ascenceur non ?
Le DIV contient du texte que je veux centrer en hauteur. De plus, si je fixe une valeur en pixel pour la hauteur, j'aurais quelque chose de correct chez moi et de différent chez quelqu'un d'autre (tout le monde n'utilise pas les même polices).

Je peux bien sur mettre un <div> vide avec propriété clear:both mais c'est un peu pourri d'un point de vue logique.
 
WRInaute accro
C'est parfaitement normal: les floats (commes les éléments en positionnement absolu ou fixe) ne font pas partie du "normal flow", c'est comme si elles n'étaient pas là, donc oui, ton div est vide. S'ils étaient comptés ton div ferait deux lignes de haut, ce qui n'est pas le cas non plus.

Si tu nous dis exactement ce que tu cherches à faire on peut probablement te suggérer d'autres solutions (mon petit doigt me dit que ça va se finir avec une table...).

Jacques.
 
WRInaute accro
Et comment on fait alors ??

Je cherche juste à afficher sur la même ligne, un texte plaqué à gauche et un texte plaqué à droite (d'un côté marquer "Accueil" de l'autre, un champ recherche).
 
WRInaute accro
Plein de solutions:
- la même chose que ce que tu fais, mais en rajoutant un bête &nbsp; dans ton div pour prendra la même place que les deux autres éléments (attention aux margins implicites des <p>, tu ferais probablement mieux d'utiliser un div, ou de contrôler de façon explicite les marges);
- la même chose que ce que tu fais, en ajoutant un truc de hauteur 0 avec un clear: both
- une table avec deux cellules, l'une en text-align: left, l'autre en text-align: right

Jacques.
 
Nouveau WRInaute
J'ai un peu de mal à suivre là...

Comme te le dit Jacques, c'est tout à fait normal puisque tu mets dedans deux élément flottants. Enlève un float, tu verras que ton div se matérialisera.
Cependant, utiliser un &nbsp; pour matérialiser le div, je ne suis pas d'accord : le &nbsp; est un espace insécable, c'est à dire qu'il à utiliser pour empêcher qu'un point d'exclamation ou un point-virgule se retrouve tout seul à la ligne (par exemple). Ce n'est pas son rôle de faire du plein dans du vide ;)

D'autre part, tu nous dis
il ne m'affiche pas le background
... Mais il n'y a pas de background de déclaré :roll:

Si tu fais ça :

Code:
#localisation{
font-weight:bold;
margin-bottom:25px;
background-color:red;
height:30px
}
Il y aura bien une zone rouge de 30pixels de hauteur.

Tout ça pour dire que... j'comprends rien à ton pb !! ;)
 
Discussions similaires
Haut