28172 sujets

CSS et mise en forme, CSS3

[Résolu] 3 colonnes largeurs dynamiques avec inline-block

Bonjour,

Je me retrouve confronté à un problème dont je n'arrive pas à trouver la solution.
J'ai un bloc nav, qui contient des éléments qui ne prennent pas trop de place mais la largeur est dynamique, un bloc section qui comporte lui-même 2 div : un tableau (.contenu) et un contenu texte (.notes).

Ce que je cherche à faire, c'est que le tableau + le contenu texte, côte à côte, prenne toute la largeur restante (donc 100% - le bloc nav). Sauf que je ne connais pas à l'avance la taille du bloc nav.
Je me retrouve avec le bloc section qui ne prend pas toute la largeur restante, mais celle du contenu. Bien sûr, je voudrai faire en sorte que ça soit un minimum responsive.


nav, section {
    display: inline-block;
    vertical-align: top;
}
.contenu, .notes {
	width: calc((100% - 40px ) / 2);
	display: inline-block;
	vertical-align: top;
}
section {
    padding: 0 10px;
}
.contenu {
    margin-right: 10px;
}
.notes {
    padding: 10px 10px 5px;
}


Du coup je suis un peu perdu sur les choix qu'il me reste à faire. Auriez-vous des pistes ?

Merci d'avance.
Modifié par Tramb (23 Feb 2015 - 09:15)
Hello !

Tu devrais regarder au niveau du display: table pour le conteneur parent et display: table-cell pour les enfants qui occuperont de part égales l'espace disponible et donc un effet responsive :

.parent {
  display: table;
  width: 100%;

}
.child {
  display: table-cell;
}


En espérant que cette piste t'aide. Smiley smile
Pas mal comme solution, mais du coup j'ai mon nav qui n'a plus sa largeur en fonction du contenu, bien que la section prenne bien tout le reste de la page oO.
Sujet clos
Aller à