Positionnement multi colonne dans le flux

Bonjour, j'ai une page dont la syntaxe est :

<div class="Site">
    <div class="Left">1</div>
    <div class="PartieRight">
          <div class="Top">2</div>
          <div class="Middle">3</div>
          <div class="Right">4</div>
    </div>
    <div class="Bottom">5</div>
</div>

ce que je veux faire c'est :

édit par Igor: merci de penser à l'option vignette pour ne pas casser la mige en page du forum

Je ne connais bien sur pas la hauteur des elements, et il faut que 1 et 4 fassent 200px de large.

Le CSS que j'ai fait fonctionne sous IE mais pas sous FF

div.Left{
    width:200px;float:left;}

div.PartieRight
{
    padding-left:10px;
    padding-left:10px;
    padding-right:10px;
    float:left;
   }
div.Middle{ 
    padding-right:210px;
 }
   
div.Right
{
    position:absolute;
    width:200px;
    top:170px;
    right:10px
    }
    
 div.Bottom{clear:both;}

Ca fait deux heures que je tourne autour et c'est ce que j'ai reussit de mieux à faire (j'ai aussi réussit une fois sous FF )

Je peux changer l'HTML si necessaire, mais je ne prefererais pas trop changer l'ordre des 1,...,5

Merci de votre précieuse aide =)
Modifié par Igor (23 Apr 2005 - 21:18)

S'il vous plait, aidez moi, j'ai essayé plusieurs choses, et je n'arrive vraiment pas à faire ca à la fois sous IE et FF

div { border:1px solid green;}
div.Left{
width:25%;float:left;
}
div.PartieRight
{
padding-left:10px;
padding-left:10px;
padding-right:10px;
float:right;
width:70%;
}

div.Middle{
	float:left;
	width:65%;
}

div.Right {
	width:30%;
	float:right;
}

div.Bottom{clear:both;}

et ton html :

<div class="Site">
	<div class="Left">1</div>
	<div class="PartieRight">
		<div class="Top">2</div>
		<div class="rightbottom">
			<div class="Middle">3</div>
			<div class="Right">4</div>
		</div>
	</div>
	<div class="Bottom">5</div>
</div>

Bon CSS !

Merci de ta réponse

j'ai essayé ta méthode, et je n'obtient pas exactement le resultat souhaité, le bloc 4 passe au dessous du bloc 3

J'ai pas eu le temps d'y regarder, mais deja merci beaucoup, je n'avais pas pensé le RightBottom et le coup du border:1px; je ne connaissais pas, je faisais plutot à coup de backgroundcolor

J'ai pas encore eu le temps de regarder exactement ce que ca fait, mais ca a l'air de venir d'un padding-right du bloc 3 ou quelque chose du genre, si tu as une solution n'hésites pas

j'ai le problème sous IE, je n'ai pas encore pu tester avec FF

Merci

Je viens de regarder un peu plus ce que tu m'as fait

Le problème c'est que moi, il me faut absolument le bloc 1 et 4 qui me fassent 200px de large !!!

j'ai essaye de modifier mais non pas moyen de faire quelque chose de correcte.

Une solution ?

Il faudrait définir dans l'espace les propriétés maximums de ton bloc principal pour pouvoir donner des largeurs exactes à tes blocs. Dans le cas présent, tu n'as ni l'un ni l'autre (d'où le fait que j'ai donné comme valeur des pourcentages), ils sont là pour occuper tout l'espace disponible.

Si tu veux des dimensions, tu peux mettre ton site à 750px de largeur (pour que ton design puisse rentrer dans des résolutions de type 800*600 et + ). Ensuite, il faudra faire des soustractions en supprimant quelques pixels pour d'éventuels décalages (padding, ou margin qui créeraient un chevauchement de blocs).

Ok, donc les seules solutions, ce serait de faire passer la largeur de mon site avec une taille fixe, ou alors si je veux continuer en 100% il faudra passer par du js ou au pire passer par un tableau.

Etant donné que je ne peux mettre le site en taille fixe, et que je ne veux pas passer par du js pour ca, il me reste plus que la solution des tableaux ?

J'ai a peu prés trouvé un exemple de site auquel je veux que ca ressemble : www.codes-sources.com

Il y a un menu à droite, un header en haut, deux colonnes en milieu du site, et du contenu en bas. Si vous avez d'autres solutions de découpe à me proposer, tout en laissant les blocs 1 et 4, merci de me dire comment faire s'il vous plait
Modifié par C y r i l (23 Apr 2005 - 21:50)