28172 sujets

CSS et mise en forme, CSS3

Diviser une page en 2 verticalement en design fluide

Bonjour à tous et merci d'avance pour votre aide,

Je m'arrache un peu les cheveux pour essayer de reproduire une division verticale de ma page web comparable à celle de l'image suivante.

upload/36481-Capture201.png

Je voudrais en effet réaliser un design "fluide", ce qui empêche je suppose l'utilisation d'une image répétée en background à laquelle j'avais d'abord pensé.

J'ai donc pensé à quelque chose de ce style mais ma division ne s'étendra alors pas jusqu'au bas de la page...

Auriez-vous une idée ?

Merci encore ! 


body{
	margin:0;
	padding:0;
}

#gauche{
	width:40%;
	float:left;
	background-color:blue;
	margin:0;
}

#droite{
	float:right;
	background-color:white;
	width:60%;
	margin:0;
}
Bonsoir,

Ce que tu cherches à réaliser est en faite très facile.

Le début est bon, il manque juste un élément pour que la hauteur de tes <div> prennent la totalité de la hauteur de la fenêtre du navigateur. Cet élément c'est un "height: 100%;" sur tes deux <div>.

Seule petite difficulté : si tu ne précise pas une "height: 100%;" sur le <html> et le <body>, tes <div> ne réagiront pas correctement. Voir ce billet pour de plus amples informations.

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

#gauche {
	width: 40%;
	height: 100%;
	float: left;
	background-color: red;
}

#droite {
	width: 60%;
	height: 100%;
	float: left;
	background-color: green;
}

Modifié par Maliki (24 Feb 2011 - 00:01)
Bonjour,

* { 
    margin: 0; 
    padding: 0; 
}


Attention sur un pc rapide ca n'a pas trop d'incidence, en revanche dés que tu es sur un netbook ou mobile ca a un impact perceptible.

Ce qui est logique puisque le navigateur boucle sur tous les éléments du DOM.
Ah effectivement je n'y avais jamais pensé !

Cette règle est bien pratique et c'est vrai que je l'utilise peut-être à outrance alors que ce n'est pas forcément nécessaire dans certains cas où peu de tags différents sont employés.

En tout cas merci pour l'info ! Smiley biggrin
Le sélecteur universel (*), c'est le mal. Cela dit, sur une page qui n'a pas des dizaines de milliers de noeuds DOM je suis pas sur que ça soit perceptible, même sur un vieux netbook. Si tu as perçu un impact, rs459, je pencherai plutôt pour un impact psychologique. Smiley cligne

En l'occurrence il n'y a que les marges et padding de body qui soient à remettre à zéro. Pas besoin d'un Reset CSS des familles.

Sinon pour la méthode proposée:
- Le height:100% sur html et body, oui, mais sur les contenus il faut du min-height!
- Pour ma part j'aurais utilisé un seul conteneur principal, et placé les deux éléments qui débordent à gauche en absolu. Donc quelque chose comme:
html { 
  height: 100%;
  background: #EEEEE4;
} 
body {
  position: relative;
  min-height: 100%;
  margin: 0 0 0 40%;
  padding: 0 20px;
  background: #FFFFFF;
}
#logo {
  position: absolute;
  top: 100px;
  left: -250px;
}
...
Oui effectivement le "min-height" s'impose absolument comme l'a précisé fvsch. Sans cela, si le contenu textuel est plus grand que la fenêtre du navigateur (et qu'une barre de scroll apparaît), le contenu dépassera des <div> dans l'exemple que j'ai donné plus haut.

Et quant à cet exemple d'ailleurs, oublie-le et prend plutôt en compte le dernier proposé par fvsch qui est plus propre !
Modifié par Maliki (25 Feb 2011 - 00:06)
Sujet clos
Aller à