Préambule

Le futur (proche)

Les mise en page avec float, inline-block et les positions relative, absolute et fixed (telles que décrites dans ce document) se sont répandues dans le début des années 2000 avec l’avénement de la spécification CSS 2, qui a permis de remplacer un système de mise en page archaïque basé sur des tableaux (<table>).

Aujourd’hui, plusieurs nouveaux outils sont intégrés au sein des navigateurs et débattus au sein du CSSWG, instance chargée de faire évoluer et définir le standard CSS.

Il s’agit principalement des modules CSS Regions, CSS Grid Layout et Flexbox. Ces modules sont encore en évolution et leurs implémentations au sein des navigateurs est loin d’être stabilisée. Mais ils deviendront sans doute de bien meilleurs outils que float ou inline-block pour concevoir des mise en page adaptés aux écrans et aux usages à venir.

[edit] Introduction à flexbox ici

01

Display

Chaque élément HTML possède par défaut une propriété display, qui peut être modifiée en CSS pour les besoins de la mise en page. Si le plus fréquemment, la valeur de ces propriétés est block ou inline, les valeurs inline-block ou none sont particulièrement utiles.

display:block

L’élément <div> est l’élément le plus courant pour diviser les pages en zones et permettre la mise en page de ces zones. Par défaut, l’élément <div> a la valeur display:block, tout comme les éléments <p>, <blockquote> (pour les citations), <form>, <header>, <footer>, <nav>, <article> ou <section>.

Tant qu’on ne leur a pas affecté de largeur, les éléments dont la propriété display est block prennent toute la largeur disponible, et s’empilent verticalement dans la page.

display:inline

Les éléments inline n’interompent pas le flux du texte ; ils s’insèrent dans celui-ci tel ce span. Les principaux éléments inline sont <a>, <span>, <strong>, <em>. À l’usage de <b> ou <i> pour produire du gras ou de l’italique, il faut généralement préférer <strong> et <em>. Quand à l’élément <u>, permettant de souligner, il est généralement à proscrire : le soulignement étant la norme la plus fréquemment adoptée pour les liens.

display:inline-block

inline-block est une valeur qui peut être utilisée pour la mise en page de colonnes et de blocs juxtaposés les uns aux autres, comme nous le verrons plus loin. Mais son usage le plus courant est celui des images. C’est effectivement la propriété par défaut de l’élément <img>.

L’élément <img> est par défaut aligné sur la ligne de base du texte qui l’entoure, à moins que sa propriété vertical-align ne soit modifiée, ou que ne lui soit affectée la propriété display:block.

display:none

La valeur none permet de masquer totalement un élément, en rendant inopérantes ses valeurs de height, width, margin ou padding. Différement, la propriété visibility:hidden masque l’élément en préservant la place prise par l’élément dans la mise en page.

02

Width & max-width

Affecter une largeur à un élément block est la première étape vers un contrôle de la mise en page.

#large {
    width: 500px;
}

<div id="large">

Pour centrer cet élément au sein de son élément parent, on peut lui affecter des valeurs de marges auto pour ses marges supérieures et inférieures.

#centre {
    width: 500px;
    margin: 0 auto;
}

<div id="centre">

Les valeurs de margin (ainsi que celle de padding, la marge interne des éléments) peuvent se noter de manière étendue ou abrégée. En utilisant la notation abrégée, l’ordre des valeurs est celui des aiguilles d’une montre : top, right, bottom et left. Les exemples ci-dessous illustrent les différentes manières d’affecter des marges :

#marges-etendues {
    margin-top:0;
    margin-right:auto;
    margin-bottom:0;
    margin-left:auto;
}
#marges-abregees {
    /* la valeur de margin-left sera la même que margin-right */
    /* la valeur de margin-top sera la même que margin-bottom */
    /* ces valeurs sont équivalentes à celles de #marges-etendues */
    margin:0 auto;
}
#marges-raccourcies {
    /* la valeur de margin-left sera la même que margin-right */
    margin:0 auto 20px;
}
#pas-de-marges {
    margin:0;
}

Si l’on veut éviter l’apparition d’une scrollbar horizontale pour les écrans dont la largeur serait inférieure à la largeur souhaitée pour le <div>, il est préférable d’utiliser la propriété max-width.

#centre-responsive {
    max-width: 500px;
    margin: 0 auto;
}

<div id="centre-responsive">

Attention ! Pour manipuler les propriétés width, height, max-width et max-height, il convient de maîtriser le « modèle de boite » ou de copier / coller la ligne ci-dessous au départ de tous vos fichiers CSS :

* { box-sizing: border-box; }

03

Positions

Le mot-clé position en CSS est un faux-ami. Sa valeur permet de définir le comportement de mise en page d’un élément au sein de la page et sa relation aux éléments qui l’entourent (éléments parents, enfants et frères (siblings).

Static

Par défaut (tant qu’on ne l’a pas modifiée), la position d’un élément est static.

#static {
    position:static;
}

On dit d’un élément auquel est affecté une position autre que static qu’il est positionné.

Fixed

La position fixed permet de définir la position d’un élément par rapprort au viewport, l’espace visible de la fenêtre du navigateur. Il permet d’utiliser les propriétés top, right, bottom ou left. Voici le code qui correspond au carré noir en bas de page :

#fixed {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 20px;
  height:20px;
  background:black;
}

Bien que particulièrement utile, cette position n’est que très partiellement supportée par les navigateurs mobiles.

Relative

La valeur relative est un outil très puissant pour la mise en page. Elle permet plusieurs comportements :

• Sans autre règle, la position relative semble être strictement identique au positionnement static.

• La position de l’élément peut être modifiée par les propriétés top, right, bottom ou left relativement à sa position d’origine.

div {
    position:relative;
    left:-40px;
    top:25px;
}

• Cette modification du positionnement préserve l’impact initial de l’élément sur ses éléments parents et frères. Ainsi, le <div class="el-2"> est affecté par la taille initiale de l'élément <div class="el-1"> après lequel il est placé.

.el-1 {
        position:relative;
        left:70px;
        width:300px;
        float:left;
    }
.el-2 {
        width:300px;
        float:left;
    }

• La position relative créee également un nouveau référenciel de positionnement pour les éléments positionnés en absolute :

Absolute

La position absolute permet de positionner un élément en supprimant l’impact qu’il a sur ses autres éléments parents et frères. L’élément positionné par le code CSS suivant se trouve tout en haut de la page.

#absolute {
    position:absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height:20px;
    background:black;
}

Cette position s’établit en effet par rapport au document ou au premier élément parent dont la position est relative.

.box {
    position:relative
}
#absolute-2 {
    position:absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height:20px;
    background:red;
}

04

Mise en page avec float & clear

La propriété float est une des plus utilisées pour structurer une mise en page, mais son usage est parfois délicat. Elle spécifie qu'un élément doit être retiré du flux normal et placé à la droite ou à la gauche du bloc qui le contient. Le texte et les éléments inline adjacents se répartiront autour de lui.

Dans son usage le plus simple, la propriété float permet d’habiller une image avec du texte :

Cette jolie lettre ornée est l’œuvre de Joseph Apoux, peintre et illustrateur français de la fin du XIXe siècle proche du décadentisme (dixit wikipedia). Joseph Apoux étudie la peinture et le dessin avec Jean-Léon Gérôme. (…) On lui doit notamment cet Alphabet pornographique, dont est issu cette image que vous pouvez voir en plus grand, et qui grace à la propriété float permet de créer une lettrine (notabene: la propriété p:first-letter permettrait de le faire de manière plus élégante, et/ou sans utiliser d’image). Pour plus de typographie érotique, voir Max Bruinsma.

                img { float:left; margin:0 10px 0 0; }

Deux colonnes

En utilisant une boîte flottante, on peut ainsi créer deux colonnes :

On affecte une marge à l’article, pour « laisser la place » à l’élément <nav> flottant.

article {
    margin-left:270px;
}

Multiples colonnes

En juxtaposant des boîtes flottantes, on peut créer une mise en page en plusieurs colonnes régulières…

class="col"
class="col"
class="col"
class="col"
class="col"
.col {
    float:left;
    width:20%;
}

…ou irrégulières :

class="col one"
class="col two"
class="col three"
.col   { float:left; height:100px; }
.one   { width:14.2857%;}
.two   { width:28.5714%;}
.three { width:57.1429%;}

Clear et overflow

Un problème se pose cependant ; l’élément conteneur n’est plus affecté par l’élément flottant ( on l’a « sorti du flux »). L’élément flottant peut donc « dépasser » de son conteneur.

Pour résoudre ce problème, de multiples solutions s’offrent ; la plus simple est ce définir la propriété overflow du conteneur avec la valeur auto. Et quand ça ne suffit pas, il faut aller chercher dans le monde merveilleux du clearfix

Clear

La propriété clear sert à contraindre l’élément qui suit un élément flottant à passer en dessous. Les valeurs possibles de clear sont left, right ou both (c’est la valeur qu’on utilise le plus souvent).

article{
    clear:both;
}

05

Blocks en ligne

Grille

La propriété float montre des limites quand il s’agit d’organiser en grille des contenus de hauteurs différentes. Les éléments viennent buter sur l’élément de plus grande hauteur :

class="box"
class="box"
avec un contenu plus important
class="box"
class="box"
class="box"
class="box"
class="box"
.box { float:left; width:20%;}

On peut alors avoir recours aux propriétés display:inline-block et vertical-align:top

class="box"
class="box"
avec un contenu plus important
class="box"
class="box"
class="box"
class="box"
class="box"
.box { display:inline-block; vertical-align:top; width:20%; }

Mise en page avec inline-block

Cette propriété permet également de structurer une mise en page. Mais elle demande une attention toute particulière. Les éléments inline-block juxtaposés se comportent « comme des mots ». Si on laisse une espace entre deux éléments inline-block, cette espace sera affichée entre les blocs, induisant une largeur supérieure à 100% lorsque deux blocs sont juxtaposés.

article {
    display:inline-block;
    vertical-align:top;
    width:70%;
}

Pour résoudre ce problème, il est nécessaire de supprimer tout espace et saut de ligne entre les éléments du code HTML (ici, nav et article) :

<!-- affichage incorrect -->
<nav>
    (navigation)
</nav>
<article>
    (texte)
</article>

<!-- affichage correct -->
<nav>
    (navigation)
</nav><article>
    (texte)
</article>