CSS Je cale sur les colonnes...

Bonjour,

Je crée le squelette de mon futur site...
Je suis débutant et j'ai un souci de colonnes.
J'ai créé trois colonnes : artistes, presentation et informations.
La colonne information s'affiche à la fin du texte de la colonne centrale presentation.

Voici l'adresse de la page Artistes :
https://orguesplurielles.000webhostapp.com/artistes.html

et voici le css pour les colonnes, il y a forcément un truc qui ne colle pas. Mais je ne vois pas. Je pensais m'en sortir avec overflow: hidden... Ben non

div#artistes
{
float: left;
width: 160px;
margin-right: 10px;
padding: 1px 0;
}
div#presentation
{
overflow: hidden;
padding: 1px 20px;
}
div#informations
{
float: right;
width: 300px;
margin-left: 10px;
padding: 1px 0;
}

Merci à ceux qui pourront m'aider.

Jean-Baptiste
Modifié par Skyros (21 Aug 2017 - 18:33)

Bonjour,

Si vous débutez voici un premier conseil de base. Appliquez un background-color distinct à vos éléments de layout (header, footer, sidebar, content...) pour bien les visualiser sur votre page pendant votre montage.

Ensuite dans votre cas les 3 colonnes doivent avoir une largeur définie, sinon par défaut un div prend toujours 100% de la largeur disponible.

Dans votre cas il manque seulement un width:410px environ (à vous d'ajuster pour définir la largeur de la gouttière entre vos blocs) et un float:left pour #presentation.

#presentation {
	float: left;
	width: 410px;
}

Veillez à supprimer le width:600 sur vos éléments p car cela force tous vos p à 600px de large.
Supprimez l'overflow:hidden de #presentation pour voir le résultat.

D'ailleurs cet overflow:hidden sur #presentation n'est pas nécessaire.

Ensuite il faut penser à stopper les effets de float pour le footer en appliquant un clear:both

.footer {
	clear: both;
}

Zelena a écrit :
Bonsoir.

Dans le HTML, le div qui a pour id 'informations' doit être placé avant le div qui a pour id 'presentation'.

Comme Zelena te l'indique, c'est ce qu'il va te permettre de faire usage de ton overflow efficacement en laissant l’élément se glisser dans l'espace laissé par les flottants qui le précedent.
démo sur codepen : https://codepen.io/gc-nomade/pen/NvLMXN

ressources a propos du contexte de formatage: https://developer.mozilla.org/fr/docs/Web/CSS/Block_formatting_context