Bonjour,

je voudrais réaliser une page avec trois blocs verticaux : un à gauche, dont la taille varie en fonction de la résolution du visiteur, un autre au milieu d'une taille de 120 pixels, et le dernier à droite d'une taille de 260 pixels.

J'ai essayé de m'inspirer du paragraphe "Trois blocs côte-à-côte avec un espace de séparation" de cette page, mais je ne réussis pas à rendre la taille du bloc de gauche variable : les deux autres blocs se mettent alors en dessous.

Comment faire ?

Merci d'avance.
Il y a évidemment plusieurs solutions. Je t'en propose une qui utilise le positionnement absolue.

extrait du fichier html :

<div id="bloc1">contenu du bloc 1</div>
<div id="bloc2">contenu du bloc 2</div>
<div id="bloc3">contenu du bloc 3</div>


en css :

#bloc1
{
    position: absolute;
    right: 380px; /* décalage de 120+260px pour laisser la place aux autres blocs */
}
#bloc2
{
    position: absolute;
    right: 260px; /* décalage de 260px pour laisser la place au bloc 3 */
    width: 120px; /* 120px de large */
}
#bloc3
{
    position: absolute;
    right: 0; /* ce dernier bloc est collé au bord droit */
    width: 260px; /* 260px de large */
}


voilà Smiley cligne