Positionnement - Alignement

Bonjour,

Quelques soucis de positionnement m'ammenent a vous poser cette question :

Comment aligner deux petit blocs l'un sous l'autre sachant qu'ils flottent a un gros bloc ayant la meme hauteur que la somme des deux blocs....

Desole si ca ressemble a un ennonce de probleme de geometrie

Pour vous aider :

------      -----
I     I      I    I 
I     I      -----
I     I      -----
I     I      I    I
------      -----

J'ai pas trouve de solution par moi meme

Merci merci


PS : clavier anglais, desole pour le Kidnaping d'accents
Modifié par Sven (20 Aug 2007 - 16:36)

Bonjour,

Peut être en plaçant tes 2 petits blocs dans un conteneur de même taille que le grand et en float par rapport au grand.

J'ai tout simplement fait deux colonnes et cela marche bien !

Mais je ne comprends pas pourquoi un de mes blocs est a gauche (art) alors que l'autre est a droite (music) comme je le souhaite.

Voici mon code :

/*Body*/
#right { width: 390px; height: 1000px; border: solid 1px black; float:left;}
#left { width: 390px; height: 1000px; border: solid 1px black;float:left; }

/*SmallBox*/
#smallBox { width: 355px; height: 160px; border: solid 1px #f3f3f3; background:url("./img/box_bottom.gif") white bottom no-repeat; }
#smallBox img.title { margin-top: 5px; margin-left: 5px; margin-bottom: 10px; }
#smallBox img.viewMore { float:right ; margin-right: 5px;}
#smallBox img.bottom { width: 355px; }

/*Box : music*/
#smallBox.music { margin-top: 60px; margin-bottom: 40px; float: right; }
#smallBox.art { float: right; }

<div id="right">
	<div>
		<div id="smallBox" class="music"><img class="title" src="./img/box_music.gif" />
			<p>Test</p>
			<img class="viewMore" src="./img/vm_yellow.gif" />
		</div>
	
		<div id="smallBox" class="art"><img class="title" src="./img/box_art.gif" />
			<p>Test</p>
			<img class="viewMore" src="./img/vm_pink.gif" />
		</div>
	</div>
</div>

Modifié par Sven (20 Aug 2007 - 18:23)

Re,

Par ce que un est en float: right et l'autre non surement !

malheuresement pas.
Meme si je mets un float right au deux, rien ne se passe

Re,

Si si, en ajoutant float: right à

#smallBox.music { float: right; margin-top: 60px; margin-bottom: 40px; }

Sous Firefox c'est parfait !
Mais sous IE....

Pourtant j'ai bien mis le float:right