Mettre les blocs noir et bordeaux en float left et right ne marchera pas puisqu'ils doivent s'étendre à l'infini selon la largeur de l'écran.
Cela dit, pas la peine de considérer "l'infini" en largeur d'écran : rares sont les écrans de plus de 1900 pixels, on peut donc se baser sur cette dimension (voire un peu plus pour être tranquille) pour tout ce qui est élément décoratif style image de background.
D'après ce que je comprends, tes blocs noir et bordeaux sont purement décoratifs : tout le contenu sera dans le bloc jaune. Dans ce cas, plutôt que de multiplier les divs, tu pourrais te contenter de faire un seul div jaune. Et pour le style du body tu mettrais :
body {
background: url(body.jpg) center top repeat-y;
}
Où body.jpg serait une image de 1900 pixels de large et 1 pixel de haut, noir dans sa moitié gauche et bordeaux dans sa moitié droite. Ainsi, en une seule ligne, tu recrées l'illusion de tes deux blocs de gauche et de droite. Et à partir de là il devient facile de mettre le bloc jaune (avec un margin: auto; et une largeur fixe pour le centrer), le bleu et le vert.
Ceci n'est évidemment qu'un exemple à adapter. Et puis, comme dit précédemment, il y a des milliers de façons de résoudre ton problème. Je suppose que les deux colonnes noir et bordeaux ne contiendront pas une seule couleur, qu'il y aura des "éléments décoratifs" à l'intérieur, style bas de colonne, dégradés, arrondis, etc... Mais de façon générale, essaie vraiment de minimiser le nombre de blocs.
Si tu nous montrais la maquette finale, ce serait plus facile de t'aiguiller, car sans savoir si les différents blocs contiennent des éléments, ou sont là juste pour décorer, ou s'ils ont des coins arrondis en bas, etc, tous ces détails, difficile de dire quelle est la meilleure solution.
Haut
