deux div avec inline-block: un glisse sous l'autre

20 août 2017 à 15:14:44

Bonjour tout le monde,

je suis en train de tester l'utilisation de display: inline-block; en m'inspirant de https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/le-positionnement-en-css

voilà mon petit exemple :

<body>
<div id="menu">
texte
</div><!-- 
 --><div id="corps">
texte
</div>
</body>

et le css

body
{		
   width: 80%;
}

#menu
{
   display: inline-block;
   width: 20%; 
   vertical-align: top;
   border: 1px solid black;

}

#corps{
   display: inline-block;
   width: 79%;
   vertical-align: top;
   border: 1px solid black;
}

quand la fenêtre (de mon browser) et de taille classique ça fonctionne:

mon problème est le suivant : quand je réduit la taille de la fenêtre (de mon browser) la partie "corps" finit par passer sous la partie "menu":

et je ne comprends pas pourquoi puisque j'ai tout mis en pourcentage ... quelqu'un à une idée ?

J'ai l'impression que si je mets le body à width:100% le problème ne se pose pas (ou moins vite) ...

je suis un peu perdu ...

-
Edité par Gerard_Lambert 20 août 2017 à 15:16:40

Lucky13

20 août 2017 à 19:18:23

Hello,

Logique , ce sont des pourcentages de : quelque chose, ici une taille variable . De plus le calcul reste approximatif. ici à vue d'oeil tu as un débordement == retour à la ligne.

les flottant seraient une bonne solution avec des pourcentages...

Je pense que la technique Flexbox répond à ta situation, plus simple à mettre en place et le navigateur s'occupe de gérer la mise en page cohérente à la taille de la fenêtre/conteneur.

-
Edité par Lucky13 20 août 2017 à 19:22:07

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Gerard_Lambert

20 août 2017 à 23:03:53

bonsoir et merci pour la réponse,

je vais regarder du côté de flexbox ça a l'air pas mal du tout, merci

par contre je n'ai pas compris ta remarque sur " ce sont des pourcentages de : quelque chose, ici une taille variable" , j'ai bien compris que quand je dis 20% pour menu et 79% pour corps , c'est 20% et 79% des 80% du body mais ça n'explique pas le retour chariot, si ? à moins que comme tu dis, les calculs soit vraiment approximatifs ...

Lucky13

20 août 2017 à 23:47:31

Juste que si ton élément manque de place dans le conteneur, alors il se positionne en dessous, voilà pour faire simple...

ex: conteneur = 50px, élément-1 = 30px et élément-2 = 20px : total : 50px

Cela devrait passer, sauf qu'en inline-block ils ont une marge par défaut, si tu agrandis la taille du texte alors ils prennent plus de place. Du coup l'élément-2 va se positionner sous l'élément-1.

Mieux expliqué et solutions : -> https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

-
Edité par Lucky13 20 août 2017 à 23:51:31

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS