Bonjour,
Float, pour créer un site en 3 colonnes n'est plus ! RIP.
https://www.alsacreations.com/article/lire/972-float-le-grand-bluff.html
Depuis plusieurs années, display s'est enrichi et permet de construire ce type gabarit facilement.
Au debut , il y avait float, vite détournée pour ce que tu veut faire et que tu peut laisser de coté ,mais trés utile et incoutournable avec shape-outside par exemple .
https://developer.mozilla.org/fr/docs/Web/CSS/shape-outside - 2 exemples ou float est utile :
https://codepen.io/gc-nomade/pen/JjbwvBe ,
https://codepen.io/gc-nomade/pen/vwqKyR
Il y a eu en 1998 display:table, qui n'a quasi jamais été utilisé (a cause de IE6 particulièrement à l'époque) et souvent mal aimé car confondu avec un vrai tableau(table>/<td>/...).
En 1999, il y a eu les colonnes (column CSS), mais pas destiné a structurer visuellement un site mais plutôt a faciliter la lecture d'un texte compacte .
Enfin flex(2009) et grid(2012 regain de 2004) ont mis un peu plus d'une décennie a arrivés.
Float a eu de beaux jours pour ce type de mise en forme, mais c'est révolu!.
Nos navigateurs actuels nous permettent d'utiliser l'un et l'autre (merci aussi à nos PC ) . Je te conseille de voir de ce coté.
2014 -
https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html
2016 -
https://www.alsacreations.com/outils/lire/1719-flexbox-cheat-sheet-pense-bete.html
2017 -
https://www.alsacreations.com/actu/lire/1735-les-navigateurs-supportent-grid-layout.html
2018 -
https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html
2019 -
https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html
2012-2020
https://www.alsacreations.com/article/lire/1388-CSS3-Grid-Layout.html
Cdt
edit en racourcie pour grid avec :
<body>
<nav></nav>
<main></main>
<aside></aside>
</body>
et comme CSS
body {
display:grid;
grid-template-columns: 250px 1fr 250px;
}
Tu auras 3 colonnes , nav et aside aux extrémités avec 250px de largeur et main au milieu qui prendra toute la place restante. C'est aussi faisable avec display:table en prenant en compte le comportement d'un tableau pour le contenir. Pour float , ce sont les limites qu'il faut accepter , respecter l'ordre des flottants et non flottants et surtout, il y a les effets de bords a gérer...
Modifié par gcyrillus (20 Apr 2021 - 21:42)
