Maîtriser le positionnement CSS dans toutes les situations

Yep

Je suis en train de lire et reproduire le "cours" : Maîtriser le positionnement CSS dans toutes les situations.

Je ne sais pas si c'est moi qui est merdoullé dans le code mais il est dit dans le cas n°1 que si le menu est plus haut que le contenu, le footer ira se coller sous le header. Hors se n'est pas le cas ...

Du coup je ne comprend plus la suite du "cours"...

Extrait du "cours" :

a écrit :
Que choisir dans mon cas?

C'est en effet une question récurrente parfaitement légitime tant CSS nous permet d'aborder un même problème sous de nombreux angles. Essayons d'aborder différents cas-types et les solutions qui s'y prêtent le mieux.
Mise en page centrée en 2 colonnes, header et pied de page

Voici le style de résultat recherché:

Schéma: structure en 2 colonnes avec en-tête et pied de page

Voici notre structure HTML:

<div id="conteneur">
<div id="header">
<!-- Ceci est mon haut de page -->
</div>
<div id="sidebar">
<!-- Ceci est ma colonne latérale -->
</div>
<div id="contenu">
<!-- Ceci est mon contenu principal -->
</div>
<div id="footer">
<!-- Ceci est mon pied de page -->
</div>
</div>

Deux cas de figures se présentent:

1. Je suis certain que ma colonne de gauche sera toujours plus courte que mon contenu principal
2. J'ignore quelle sera la colonne la plus haute

Lorsqu'on se trouve dans la première situation (que je crois plus fréquente), c'est naturellement vers la propriété qui est censée gérer tout positionnement que l'on va se tourner. En gardant bien en tête les notions de flux, il nous sera très facile de réaliser cette mise en page rapidement:

#conteneur {width:760px; margin:0 auto;}
#sidebar {position:absolute; width:170px;}
#contenu {margin-left:170px;}

Que se passe-t-il exactement? Le fait d'attribuer une position absolue à notre colonne latérale la retire totalement du flux, l'élément "n'existe" plus aux yeux des autres éléments du flux. L'élément étant déjà à la bonne place, je n'ai pas à lui attribuer de coordonnées. Puisque cet élément est comme absent de la page du point de vue du div#contenu, celui-ci remonte jusqu'au premier contenu dans le flux qu'il rencontre, à savoir notre haut de page. Mon contenu étant un élément de type block, il recouvre par définition toute la largeur de #conteneur. Il ne reste plus alors qu'à lui attribuer une marge à gauche correspondant à la taille de ma colonne latérale.

Malheureusement, si nous nous trouvons dans le second cas évoqué (hauteurs imprévisibles), la propriété position ne pourra plus être employée sous peine de voir notre pied de page se placer juste en-dessous du header. En effet, nous n'avons sorti du flux dans l'exemple précédent que la colonne la moins haute, ce qui a pour effet de laisser le pied de page se placer naturellement sous le dernier contenu du flux rencontré: notre contenu principal. Si l'on ne peut prédire quelle sera la colonne la plus haute, il nous est forcémment impossible de garder avec certitude la bonne colonne dans le flux. Dans ce cas, et uniquement dans ce cas, nous allons recourir aux flottants avec parcimonie et être contraints de rajouter une division dans notre code HTML afin d'englober l'enfant flottant. Le code HTML se présente dès lors comme ceci ...

Vous pouvez jetez un oeil ?
Modifié par Florent V. (14 Jan 2008 - 10:44)

Bonjour,

C'est à priori une errer d'inattention de l'auteur, qui aura échappé aux modérateurs lors de la relecture.

Dans le passage que tu cites, on parle deux fois de contenus en flux qui viennent se placer juste en dessous du contenu en flux précédent (sans tenir compte de l'élément positionné en absolu). La première fois, on parle de div#contenu, qui vient bien se placer sous div#header. Dans le deuxième cas, on parle de div#footer, qui ne vient naturellement pas se placer sous div#header comme on le laisse entendre, mais sous div#contenu!

Je laisse l'auteur corriger de lui-même cette petite erreur.

ok mais : dans les deux cas donc je ne vois aucuns changements sur le footer que se soit avec une menu en float ou en absolute ...

Heu... le bloc de contenu est bien plus court que le menu?
Parce que sinon c'est normal.

Là, sans voir la page, difficile d'en dire plus.