28172 sujets

CSS et mise en forme, CSS3

Problème avec un "float"

Bonjour à tous,

alors voilà j'ai un problème pour créer un float sur un div, j'ai créer deux div dans un div principal, tous deux sont en float right avec un qui possède une margin right de la taille du div suivant. Cependant je voudrais que quand le div à gauche s'agrandisse, celui de droite s'agrandisse aussi, je parle bien sûr de la hauteur...


<div id="content">

<div id="article">un petit message</div>

<div id="right">dedede</div>
<div id="left">dedede</div>
<div id="clear"></div>

</div>




div#article{
	background-image: url('img/bgArticle.png');
	margin-bottom: 20px ;
	font: 30px policeHeader;
	color: rgb(66,218,161);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	height: auto;
	padding: 20px;
	text-align: justify;
}
div#content{
	margin: 0px auto 20px auto;
	width: 80%;
	color: rgb(27,174,194);
	font-family: arial;
}
div#left{
	float: right;
	background-image: url('img/bgArticle.png');
	width: 40%;
	margin: 20px 0 20px 0;
	border-right: 1px solid rgb(52,52,52);
	padding: 20px;
}
div#right{
	width: 25%;
	float: right;
	background-image: url('img/bgArticle.png');
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 20px;
	text-align: justify;
	font-size: 12px;
	color: rgb(83,83,83) ;
	font-family: arial;
}


Dans ce code quand la hauteur de la div left s'agrandie, la div right ne s'agrandie pas et reste à sa position initiale...
une page en ligne ?

Paskeu j'ai beau lire et relire ton post, je comprends rien (enfin disons que je ne comprends pas le but) et je comprends pas ton "margin right de la taille du div suivant".
Avec un visuel, ce sera peut-être un peu plus facile Smiley sweatdrop
Bonjour,
Il me semble que c'est un cas où il faudrait utiliser les "colonnes factices". je crois que c'est une astuce permettant d'avoir des colonnes de même hauteur quelle que soit la hauteur des contenus.

Si tu fais une recherche ici ou sur le web tu devrais trouver ton bonheur ; il y a aussi des gabarits ici qui utilisent cette technique http://www.alsacreations.com/static/gabarits/liste.html (cf : gabarit 10 et 11)

Enfin je ne suis pas très sure que ce soit la solution à ton problème... Smiley confus

Sinon est-ce que tu as essayé de mettre
margin: 20px 0 20px 0; sur la div #right
On a l'impression que tes éléments ne sont pas alignés...
Modifié par thelma (23 Sep 2010 - 21:06)
Sujet clos
Aller à