18041 sujets

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

Probleme d'etirement de colonne avec des float

Bonjour à tous,

Voilà j'aimerai que ma colonne de gauche s'étire en fonction du contenu de la colonne de droite. Je cnnais l'utilisation de clear:both; pour ce genre de problème mais là je n'arrive pas à le faire fonctionner Smiley decu Smiley decu

Voilà mon code css :


/* Conteneur principal */
div#global{
	width:948px;
	margin:0 auto;
	border-left:1px solid #666666;
	border-right:1px solid #666666;
}
/* Zone qui doit s'etirer automatiquement*/
p#txtGauche{
	float:left;
	width:300px;
	background:#CD3500;
	text-align:center;
}
/* Zone qui contiendra le texte */
p#txtDroite{
	font:11px Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	padding:5px 10px 35px 10px;
	color:#000;
	line-height:20px;
}
.spacer{visibility:hidden;clear:both;}


Ma page html :



<!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=iso-8859-1" />
		
		<meta name="description" content="" />
		
		<title>Test</title>
		
		<link rel="stylesheet" type="text/css" href="css/bowling4.css" media="screen" />
		
	</head>
	
	<body>

		<div id="global">

			<p id="txtGauche">
				
			</p>

			<p id="txtDroite">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec cursus, enim eu elementum fringilla, dolor purus placerat nulla, sit amet rhoncus massa justo eget lorem. Quisque quis erat vitae erat laoreet euismod. Morbi nec magna. Morbi auctor, felis a congue faucibus, metus mi porttitor erat, vitae tempor eros mi vel libero. Nunc sed ipsum. Morbi placerat arcu. Aliquam erat volutpat. Nam elit quam, pretium nec, vehicula sed, pulvinar non, urna. Nulla aliquet velit eget urna. Proin tincidunt, ipsum ac tincidunt vestibulum, enim libero tempor felis, et laoreet augue leo in mi. Nullam metus lacus, rhoncus eget, ornare et, iaculis quis, lacus. Suspendisse porta. Donec nonummy scelerisque orci. In gravida, urna sed mollis eleifend, elit elit auctor nibh, nec consequat nisi tellus vel sapien. Phasellus tempor, sem vitae condimentum sagittis, orci magna tincidunt ligula, ac imperdiet ante tortor et augue. Proin in lorem id orci iaculis cursus. Quisque diam. Pellentesque sollicitudin semper ante. Praesent sagittis blandit nisl. Pellentesque tortor quam, iaculis a, viverra a, blandit id, leo.

Duis gravida. Mauris id lectus placerat justo faucibus ultrices. Morbi aliquet mi in elit. Donec tincidunt ornare felis. Nulla malesuada ligula luctus nisi. Ut id massa vitae ligula iaculis varius. Fusce volutpat pede id lectus. Praesent varius tempor ante. Praesent elementum gravida felis. Fusce semper eros ut felis.

Pellentesque eget lacus. Ut ultricies dictum massa. Etiam eu justo sit amet libero facilisis elementum. Etiam congue, ligula sed mollis volutpat, dui eros sagittis velit, id aliquet felis sapien nec ipsum. Nam eu ipsum non dolor tincidunt hendrerit. Sed pulvinar eleifend turpis. Praesent porttitor arcu sit amet eros ultrices tristique. Sed felis. Nunc interdum nulla sit amet metus. Ut vel est nec orci vestibulum sollicitudin. Maecenas ullamcorper. Morbi interdum sollicitudin turpis. Duis cursus dui laoreet nulla. Vestibulum dolor mauris, volutpat at, euismod at, tincidunt sit amet, nisi. Donec est massa, faucibus eget, viverra gravida, rutrum sit amet, metus. 
			</p>
				
			<div class="spacer">&nbsp;</div>
		
		</div>
	
	</body>
</html>


Merci d'avance Smiley biggrin
Administrateur
erehcab a écrit :
Oui c'est exactement ça, normallement je devrais pouvoir utiliser un clear:both ???

Le clear:both permettra à l'élément de s'afficher sous les éléments flottants, mais il ne permettra pas d'avoir des colonnes de hauteurs identiques.
Sujet clos
Aller à