Créer 3 blocs horizontaux de même hauteur

Bonjour,

Je souhaite créer une page qui ait 3 blocs horizontaux qui prennent chacun 33.33% de la hauteur de l'écran.
Je ne vois pas du tout comment faire, j'ai utilisé la méthode de ce tuto mais cela ne convient qu'à des blocs verticaux.

L'idéal serait que le contenu de chaque bloc soit aussi centré verticalement.
Voici ce que je cherche à faire
http://img15.hostingpics.net/pics/288341Sanstitre2.png

Voici le code utilisé pour le moment

<div id="main">
	<div class="message01">
		texte blablabla
	</div>
	<div class="message02">
		texte blablabla
	</div>
	<div class="message03">
		texte blablabla
	</div>
</div>

Et son CSS

.main { height:100%; }
.message01, .message02, .message03 { height:33.3%; }

un coup de main svp ?
Merci
Modifié par cevichero (11 Jan 2014 - 17:35)

Déjà tu as un id "main", pas une classe.

limipl a écrit :
Déjà tu as un id "main", pas une classe.

D'une part, et d'autre part, 100% de quoi, par rapport à quoi ?
Ce qu'il contient ?
La hauteur de la fenêtre (sur laquelle tu as également défini une "hauteur référence"...)?
Si tu réponds à ces questions, tu te rapproches d'une solution
(Et probablement d'éventuels futurs problèmes; marges, bordures, positionnement ?)

Bon courage

6l20 a écrit :

D'une part, et d'autre part, 100% de quoi, par rapport à quoi ?
Ce qu'il contient ?
La hauteur de la fenêtre (sur laquelle tu as également défini une "hauteur référence"...)?
Si tu réponds à ces questions, tu te rapproches d'une solution
(Et probablement d'éventuels futurs problèmes; marges, bordures, positionnement ?)

Vous avez raison pour la classe, je corrige ça de suite

Mais vous ne répondez pas à ma question ^_^
Concernant la hauteur, je disais que les 3 blocs prenaient la toute "hauteur de l'écran" puisque chacun prend 33.33%. Donc, adaptable à toute résolution.
1 bloc contient quelques lignes de texte,
1 autre bloc contient une image
1 autre bloc contient quelques lignes de texte,

Une piste svp ?
Modifié par cevichero (11 Jan 2014 - 20:03)

Une piste
Modifié par 6l20 (11 Jan 2014 - 23:10)

cevichero a écrit :
Une piste svp ?

6l20 a écrit :

100% de quoi, par rapport à quoi ?

html, body, #main {
    height:100%;
}

la ça marche parce que html prend la hauteur de la fenêtre, body récupère les 100% en reference de html et #main fait de même sur body si il est enfant direct de body.

@6|20 ton lien est cassé
Modifié par gc-nomade (11 Jan 2014 - 22:56)

6l20 a écrit :
Une piste

Euh cette page 404 ?
Modifié par 6l20 (11 Jan 2014 - 23:14)

cevichero a écrit :
Euh cette page 404 ?

Désolé, ce n'etait pas une mauvaise blague, j'ai merdoyé en faisant le lien
Ça doit être corrigé

Merci à toi et à GC nomade !