18041 sujets

Questions générales et questions de débutants

Flottant

Bonjour, voilà mon problème :
1 - Le corps de ma page redimensionnable et en float:right
2 - Une colonne à gauche en fixe
3 - Le tout dans un conteneur

Lorsque je mets une largeur fixe à la boite en float:right tout baigne.
Mais si je remplace la largeur fixe par une marge gauche (240 px) pour repousser cette boite; la colonne de gauche descend de toute sa hauteur.

Bizarre.

Pouvez-vous me conseiller ? Merci.



<style type="text/css">
<!--
body {
	background-color: #999;
	margin: 0px;
	padding: 0px;
}
h2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #000;
	background-color: #CCC;
	margin: 0px;
	text-indent: 10px;
}

.textecourant {	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000;
	text-align: left;
	line-height: 16px;
	margin: 0 10px 0 10px;
	padding: 10px 0 10px 0;
}
#colonne_gauche {
	width: 200px;
	background-color: #fff;
	margin-left: 20px;

}
#corps {
	background-color: #fff;
	margin-right: 20px;
	float: right;
	margin-left: 240px;
}
#conteneur {
	width: 1000px;
	background-color: #666;
	padding: 20px 0 20px 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}
-->
</style>





<body>
<div id="conteneur">
<div id="corps">
<h2>Corps de la page</h2>
<p class="textecourant">Mettez davantage de contenu dans la colonne de Gauche.</p>
<p class="textecourant">Résultat :  la boite CONTENEUR ne suit pas (la boite Conteneur se cale par rapport à la colonne de droit)e.</p>
<p class="textecourant">Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus. Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset. Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas. Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus. Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset. Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus. Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset. Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas</p>
</div>
<div id="colonne_gauche">
<h2>Colonne gauche</h2>
<p class="textecourant">Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus. Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt. Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus. Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt. Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt. </p>
</div>
</div><!-- fin de boite conteneur -->
</body>
Bonjour,

Il serait plus logique d'avoir ta colonne gauche avant le corps dans le code HTML (même ordre visuel et dans le code) et de simplement faire flotter la colonne à gauche.
Bonjour, oui mais je l'ai mise à droite croyant régler mon problème, à savoir :
je souhaite que la boite Conteneur s'étire en hauteur par rapport à la plus haute des 2 colonnes.
Lorsque je mettais ma colonne gauche en float.left dans l'ordre visuel et que ma boite corps soit la plus haute, là ça fonctionne ; la boite conteneur s'étire.
Mais dans le cas où c'est ma colonne de gauche qui est la + haute, là, la boite conteneur ne s'étire pas en hauteur, elle se cale par rapport à la boite "corps".
Donc, je pensais qu'avec la solution "corps" à droite ça marcherait.

Mais depuis, j'ai trouvé ça (voir le code) qui permet apparemment de forcer la boite "conteneur" à contenir tous ses éléments enfants :


.clearfloat { 
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
]


<br class="clearfloat" />

Et ça résoud donc mon problème, par contre est-ce valide ?

A +
Sujet clos
Aller à