2 blocs côtes à côtes, et un en dessous

Bonjour,

Voilà je butte pour ajouter un bloc en dessous de 2 qui sont côtes à côtes.
Ces deux blocs n'ont pas une hauteur fixe, elle change suivant le contenu.
Alors voilà je pensais faire comme ceci mais mon bloc_bas se retrouve en plein millieu des 2 autres...

#bloc_gauche {
display: inline;
float: left;
margin: 0 0 10px 0;
width: 470px;
}
#bloc_droite {
display: inline;
float: right;
margin: 0 0 10px 0;
width: 270px;
}
#bloc_bas {
display: block;
width: 800px;
}

Si quelqun peut me mettre sur le bonne voie...
Bonne journée et bon code =)

Tu pourrais être un peu plus précis sur ce que tu voudrais obtenir, et ce que ca affiche.

Essais de mettre "display:block;" plutôt que "inline"
Modifié par TheReverendEVIL (06 Apr 2006 - 11:58)

A delete, désolé !
Modifié par TheReverendEVIL (06 Apr 2006 - 11:57)

Salut supercanard,

Il y a un petit problème dans ta css : tu ne peux pas afficher un élément "inline" et lui donner des dimensions. Pour cela, il faut le mettre en "display:block".

Pour éviter que ton contenu vienne se placer entre tes 2 blocs, tu peux lui donner une propriété clear:both; qui devrait faire l'affaire.
Modifié par Jihel (06 Apr 2006 - 12:17)

Jihel a écrit :

Il y a un petit problème dans ta css : tu ne peux pas afficher un élément "inline" et lui donner des dimensions. Pour cela, il faut le mettre en "display:block".
Pour éviter que ton contenu vienne se placer entre tes 2 blocs, tu peux lui donner une propriété clear:both; qui devrait faire l'affaire.

Salut Jihel,
C'est au contraire bien de laisser display:inline s'il y a des marges horizontales, car ça permet de corriger un bug d'IE. Cf : IE Doubled Float-Margin Bug

Mais pour la div du bas, c'est effectivement {clear:both} qu'il faut utiliser
http://www.yoyodesign.org/doc/w3c/css2/visuren.html#flow-control
Modifié par Alan (06 Apr 2006 - 12:26)

J'avais oublié clear:both .. et entre temps j'ai trouvé une solution. Float left pour tout le monde avec donc des marges à gauche pour le 2em bloc et du coups le troisieme passe bien en dessous :

#bloc_gauche {
display: inline;
float: left;
margin: 0 0 40px 0;
width: 470px;
}
#bloc_droite {
display: inline;
float: left;
margin: 0 0 40px 60px;
width: 270px;
}
#bloc_bas {
margin: 0 0 10px 0;
}

Je reviens sur ce que tu as dit jihel... je savais pas qu'il ne fallait donner de dimension si l'on utilise la propriete inline
Mais du coups si je veut 2 blocs de largeur spécifique côtes à côtes il y ' a une autre solution ?

Après l'intervention d'Alan, je reviens sur ce que j'ai dit :
on peut dimensionner un bloc "inline" s'il est flottant. Je ne connaissais pas cette nuance . Merci Alan

Donc tu peux garder tes dimensions...
Par contre dans ton dernier exemple, le #bloc_bas passe en dessous parce qu'il n'y a plus de place pour lui sur ton écran. Avec une résolution plus importante ou moins de contenu, il se placera à côté. Il faudra donc tout de même ajouter un clear:left pour être tout à fait sûr.
Modifié par Jihel (06 Apr 2006 - 13:06)

Jihel a écrit :
Après l'intervention d'Alan, je reviens sur ce que j'ai dit :
Avec une résolution plus importante ou moins de contenu, il se placera à côté. Il faudra donc tout de même ajouter un clear:left pour être tout à fait sûr.

Ok merci =)
Par contre j'ai oublié de préciser que tout ça se trouvais dans un containeur de taille fixe en largeur donc ça devrais être bon non ?