[Résolu] Footer avec deux background-color

Salut à vous,

Je souhaite réaliser un pied-de-page (footer) de 1000px de large centré.
Le premier bloc ferait 250px de large et le deuxième en ferait 750px.

Problème : le premier bloc devrait avoir une couleur de fond (rouge #f00) en partant de l'extrémité gauche du document et le deuxième bloc devrait avoir une autre couleur de fond (vert #0f0) qui irait jusqu'à l'extrémité droite du document. Contrainte supplémentaire : ces deux blocs doivent être de même hauteur peu importe leur contenu.

Voici une image de ce que je souhaite faire :

Bonjour,

Tu devrais esayer le display: table.

Voici un article sur le sujet : Alsacreations
Et un exemple : jsfiddle

Essaie de ne pas trop utiliser des valeurs en px, aujourd'hui avec le design fluide il vaut mieux travailler en pourcentage.

a+
Modifié par Yordi (01 Jul 2015 - 17:28)

Yordi a écrit :
il vaut mieux travailler en pourcentage.

Ou en relatif (em, rem).

Sorry mais je ne vois toujours pas comment faire...

Je reposte une image de ce que je souhaite obtenir car je ne suis pas certain que l'image précédente ait bien été comprise :

Remarque : concernant l'utilisation des pixels, c'est volontaire.

22px a écrit :
Salut,

Tu peux peut-être partir sur quelque chose comme ça : http://codepen.io/anon/pen/pJaQOa
(après il y a peut être plus simple).

Il y a plus simple et mons contraignant. C'est juste une piste à suivre

<div class="m960 center grid1-2">
  <div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quod ullam vel repudiandae, ut, quisquam laborum perspiciatis eos vero consequatur dolorem numquam vitae? Natus, quas provident vel quod sapiente doloremque?
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quod ullam vel repudiandae, ut, quisquam laborum perspiciatis eos vero consequatur dolorem numquam vitae? Natus, quas provident vel quod sapiente doloremque?
  </div>
</div>

html{
  font-size:62.5%;
}

body{
  font-size:1.4rem;
}
.m960{
  max-width:96rem;
}
.center{
  margin:0 auto;
}
.grid1-2{
  display:flex;
}

.grid1-2 > *{
  width:75%;
}
.grid1-2 > *:first-child{
  width:25%;
}

@22px Merci à toi ! Ca fonctionne parfaitement bien. Je regrette de ne pas y avoir pensé par moi-même et en plus, c'est fully compatible IE8.

@niuxe Merci aussi de vouloir y apporter une solution mais mon unique problème était la couleur de fond à l'extrême gauche et à l'extrême droite de mes deux blocs de texte. Si tu reprends ma dernière image dans mon post précédent, il s'agit de la couleur de fond pour les deux zones où la largeur est inconnue (car variable).

Alphonse a écrit :

@niuxe Merci aussi de vouloir y apporter une solution mais mon unique problème était la couleur de fond à l'extrême gauche et à l'extrême droite de mes deux blocs de texte. Si tu reprends ma dernière image dans mon post précédent, il s'agit de la couleur de fond pour les deux zones où la largeur est inconnue (car variable).

ah oui pardon, j'ai pas vu la nuance. :$