Aide pour positionner correctement des "div" imbriqués ?

Bonjour,

J'ai quelques difficultés à positionner correctement mes différents "div" imbriqués, c'est pourquoi je viens vous demander un petit peu d'aide.

Voici le résultat que je souhaite avoir :
http://img545.imageshack.us/img545/1475/sanstitreli.png
Noir = entete (largeur=750 et hauteur=128)
Rouge = logo (taille fixe 128x128)
Bleu = titre (hauteur 64)
Vert = menu (hauteur 64)

Voici mon code HTML :

<div id="entete">
          <div id="logo"></div>
          <div id="titre"></div>
          <div id="menu"></div>
</div>

#entete
{
	background-color	: #00FF00;
	height				: 128px;
	width				: 750px;
}

#logo
{
	background-color	: #0000FF;
	height				: 128px;
	width				: 128px;
}

#titre
{
	background-color	: #FFFF00;
	height				: 64px;
}

#menu
{
	background-color	: #00FFFF;
	height				: 64px;
}

Je ne sais pas quelles propriétés CSS je dois utiliser pour arriver à mon résultat ?

Edit : j'ai réussi à faire ce que je voulais, mais je pense que c'est un peu du bricolage, qu'en pensez-vous ?

#entete
{
	background-color	: #FF0000;
        width				: 750px;
}

#logo
{
	background-color	: #00FF00;
	width				: 128px;
}

#titre
{
	background-color	: #0000FF;
	height				: 64px;
	margin-left			: 128px;
	margin-top			: -128px;
}

#menu
{
	background-color	: #FFFF00;
	height				: 64px;
	margin-left			: 128px;
}

C'est du bricolage ?

Merci pour votre aide,
Mathieu
Modifié par mrousse83 (10 Feb 2011 - 15:24)

Bonsoir,

Eh bien oui c'est un peu du "bricolage" dans la mesure où tu t'embêtes à replacer tous tes éléments en fonction de leurs positions dans le flux normal (les uns en-dessous des autres dans ta <div> "entete").

Pour éviter tous ces décalages, tu peux utiliser le positionnement "flottant" qui va se charger de placer les éléments les uns à côtés des autres :

#entete
{
	width: 750px;
	height: 128px;
	background-color: #00FF00;
}

#logo
{
	width: 128px;
	height: 128px;
	float: left;
	background-color: #0000FF;
}

#titre
{
	width: 622px; /* largeur restante à droite du logo */
	height: 64px;
	float: left;
	background-color: #FFFF00;
}

#menu
{
	width: 622px;
	height: 64px;
	float: left;
	background-color: #00FFFF;
}

La seule différence est qu'on affecte une longueur aux <div> "titre" et "menu" (622px).

En positionnement "flottant", les éléments se placent les uns à côtés des autres. A partir de là, si on alloue au titre tout pile la place qu'il reste à droite du logo dans l'entête, le menu n'aura plus de place pour se placer à côté et va donc passer en-dessous, toujours à côté du logo.

De la documentation sur le "float".

Bonjour,

Merci pour vos conseils, j'ai corrigé mon code CSS, c'est plus propre !

Mathieu