28172 sujets

CSS et mise en forme, CSS3

[Résolu] Une boite <div> flottante passe sous une autre

Bonsoir à tous,
Question de "truffe" : je souhaite avoir une boite à largeur fixe et une autre boite qui occupe le reste de la place disponible, le tout dans un conteneur "neutre".
Voilà mes CSS :
#colGauche {
	background-color: #f99;
	float: left;
	width: 300px;
}
#colDroite {
	background-color: #9cf;
	float:left;
}

Voilà la structure de la page :
<div>
  <div id="colGauche">
    <p>Etiam sollicitudin... plein de texte</p>
  </div>
  <div id="colDroite">
    <p>Lorem ipsum dolor sit amet... plein de texte</p>
  </div>
</div>

Dans FF ma deuxième boite passe sous la première : je ne comprend pas pourquoi.

Merci de votre aide.
Modifié par krakkos (04 Sep 2009 - 17:14)
Salut,

Déja, il est inutile que tes deux colonnes soient en position flottante. Smiley cligne

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum. Smiley cligne
En l'état, j'ai peur qu'il ne soit difficile de t'apporter une solution.
C'est beaucoup plus un test qu'autre chose, de ce fait je n'ai pas de page en ligne. Mais je peux la mettre en ligne si besoin est ou fournir tout le code, il me suffit d'ajouter un <html>, un <head> et un <body>. Je n'ai rien de plus.
Pour les explications, c'est vraiment cela : dans un conteneur <div>, je veux avoir deux boites <div>, une à largeur fixe et l'autre qui occupe la place restante. Une simple mise en page à deux colonnes dans un conteneur.
Merci pour vos aides
Voilà le code complet (sans le texte) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colonnes</title>
<style type="text/css" media="screen">
#colGauche {
	background: #f99;
	float: left;
	width: 300px;
}
#colDroite {
	background-color:#9cf;
	float: left;
}
</style>
</head>
<body>
<div>
  <div id="colGauche">
    <p>Aenean tristique...</p>
  </div>
  <div id="colDroite">
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>
</body>
</html>
Mikachu a écrit :
Déja, il est inutile que tes deux colonnes soient en position flottante.

Mais dans ce cas, je ne pourrais pas avoir deux colonnes l'une à côté de l'autre ?
Si la deuxième n'est pas flottante, le texte pourra passer sous la première boite.
krakkos a écrit :
Mais dans ce cas, je ne pourrais pas avoir deux colonnes l'une à côté de l'autre ?

Il suffit de faire flotter la première.

krakkos a écrit :
Si la deuxième n'est pas flottante, le texte pourra passer sous la première boite.

Il y a deux moyens d'empêcher ça. Hmm, mettons trois, même. Je te laisse soit faire preuve d'un peu d'imagination, soit faire preuve d'un peu de débrouillardise (aller sur www.alsacreations.com et faire une recherche serait un bon début). Smiley lol
Florent V. a écrit :
Il suffit de faire flotter la première.

Effectivement si ma première boite est flottante, je peux mettre une deuxième boite non flottante avec une marge gauche égale à la largeur de la première boite.

Mais mon problème et ma première question reste : si ma deuxième boite flotte, pourquoi elle passe sous la première.

merci de votre aide
Salut,

krakkos a écrit :
Mais mon problème et ma première question reste : si ma deuxième boite flotte, pourquoi elle passe sous la première.
Un élément flottant passe à la ligne s'il n'a pas la place nécessaire pour flotter. En l'occurrence tu affectes une largeur (width) au premier DIV mais pas au second qui va donc faire par défaut 100% de la largeur de son conteneur.
Heyoan a écrit :
En l'occurrence tu affectes une largeur (width) au premier DIV mais pas au second qui va donc faire par défaut 100% de la largeur de son conteneur.

Correction: un élément flottant va prendre la largeur nécessaire à son contenu. Si ce contenu comprend du texte un peu long, ce texte va prendre toute la largeur possible (et donc augmenter d'autant la largeur du parent ou ancêtre flottant) avant de passer à la ligne. C'est ce comportement en présence de texte qui demande à trouver des astuces différentes lorsqu'on veut Adapter une légende à la largeur de l'image.
Florent V. a écrit :
Correction: un élément flottant va prendre la largeur nécessaire à son contenu. Si ce contenu comprend du texte un peu long, ce texte va prendre toute la largeur possible (et donc augmenter d'autant la largeur du parent ou ancêtre flottant) avant de passer à la ligne.
Ah OK. Merci pour la précision. Smiley cligne
Sujet clos
Aller à