RESOLU Site 100% mais menu à 200px

J'ai un colonne #A et #B float:left pour les deux. #A à un width de 200px et #B n'a pas de width car j'aimerais qu'il prenne tout le reste de la page. Si je lui mais pas de width ou bien que je lui mette un width de 100% il se trouve que mon #B va aller en dessous du #A.

Comment faire pour que mon #B soit à côté de mon #A.
Modifié par britanicus75 (27 May 2009 - 15:31)

Salut,

Enlève le float:left de #B.

Cela met juste mon h1 à coté mais tout le reste du contenu va dessous quand même. Est-ce que le fait que j'ai des éléments en display:block ou bien des clear:both aurait un impact?
Modifié par britanicus75 (26 May 2009 - 20:15)

Bonjour,

Hop:

#A {
    float: left;
    width: 200px;
}
#B {
    margin-left: 220px;
}

Et voilà.

Détails: http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html (suivre le tutoriel en virant mentalement la colonne de droite).

Florent V. a écrit :
Bonjour,

Hop:

#A {
    float: left;
    width: 200px;
}
#B {
    margin-left: 220px;
}

Et voilà.

Détails: http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html (suivre le tutoriel en virant mentalement la colonne de droite).

C'est ce que j'avais au début mais par la suite mon H1 aligné a droit et ses utilitaires float gauche fait en sorte qu'il y un gros espace en dessous du h1. Je ne sais pas si je suis assez claire des mes explications?
Modifié par britanicus75 (26 May 2009 - 21:07)

britanicus75 a écrit :
Est-ce que le fait que j'ai des éléments en display:block

Non.

britanicus75 a écrit :
ou bien des clear:both aurait un impact?

Oui.

Agylus a écrit :
Non. Oui.

Donc dans mon #B je ne pourrais mettre aucun clear? C'est quasiment impossible.

Si, il te suffit de mettre un overflow:hidden ou auto sur #B par exemple, qui lui confèrera un nouveau contexte de formatage et restreindra ainsi l'usage des clear enfants à cet élément au maximum.

britanicus75 a écrit :
Je ne sais pas si je suis assez claire des mes explications?

Ça n'engage que moi, mais je dirais que tu ne l'es pas.

«ses utilitaires float gauche» -> Sa Renault Express plane droit?
«fait en sorte qu'il y un gros» -> Manque des mots.
«espace en dessous du h1» -> Moi j'en vois un au-dessus, et un autre en-dessous mais pas de contenu donc je suis circonspect.

À tout hasard, ça n'aurait pas un lien avec ça: Float, clear et contextes de formatage?
Modifié par Florent V. (26 May 2009 - 22:40)

En passant, si tu mets un overflow:hidden (plus du hasLayout pour IE6) à #B, plus besoin de margin-left. Juste un petit margin-right sur #A pour faire l'écart entre les deux, et pour le reste le contexte de formatage (ou le hasLayout pour IE6) s'en charge.

Bien entendu tout ça est détaillé dans l'article que j'avais indiqué plus haut.

Moi je dis que ça un raaport avec ça

Florent V. a écrit :

Détails: http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html (suivre le tutoriel en virant mentalement la colonne de droite).

Exercice difficile. Je vais essayer de faire de faire disparaitre mentalement ie6... on ne sait jamais

Florent V. a écrit :

À tout hasard, ça n'aurait pas un lien avec ça: Float, clear et contextes de formatage?

Article très intéressant. Le overflow corrige le tout.