Bonjour,

D'avance je m'excuse de vous écrire pour ce problème qui je suis certain va être résolu en un claquement de doigt. J'ai néanmoins quand même besoin de votre aide car j'ai beau relire, vérifier, chercher sur le forum, sur le w3c ou le net pourquoi mon

display: inline-block;

ne fonctionne pas comme indiqué dans le cours Apprenez à créer votre site web avec HTML5/CSS3 chapitre 3 section 5 D'autres techniques de mise en page. Pourtant c'est pas super compliqué, le code HTML est fourni et sur le CSS, il y a 12 lignes à peine. J'ai double-check plus d'une fois et non je vous jure, je ne vois pas le cheveux dans la soupe...

Pas besoin de vous montrer mon code, HTML/CSS, j'ai fait un copier/coller du HTML et du CSS. Cependant au lieu de m'afficher le résultat attendu, à savoir 343935.png et bien à la place j'ai mes deux blocks l'un au dessous de l'autre... Et il n'y a pas moyen, je ne vois pas le problème... Je vous laisse imaginer que même en tapant 

vertical-align: top;

rien ne change... Si une âme charitable veut bien me donner une explication, je lui en serais très reconnaissant.

Bien à vous, R41L 

-
Edité par Adrien Valenzuela 2 juillet 2020 à 12:03:57

Ne t'excuse pas le forum est fait pour ça 😁

La différence avec le cours c'est ton contenu : il est tellement long que son conteneur s'est élargi au maximum, mais du coup il n'a plus la place de tenir à côté de l'autre alors il passe à la ligne.

Ne t'en fais pas de toute façon en pratique on n'utilise pas inline-block pour ce genre de mise en page.

Salut MatTheCat,

Merci beaucoup pour te réponse. Ok je comprends. Du coup si c'est bien le cas, si j'utilise un width 50% ou moins pour réduire <section>, en théorie mes deux blocks devraient se placer l'un à coté de l'autre non ?

Bien à toi, R41L

Bonjour

Je pense que tu as mis des bordures a tes div

Donc admettons si ta première div fais 10% et l'autre 90% plus 1 pixel de bordure ça fait plus de 100% donc ta deuxième div passe en dessous de la première.

Mais sans ton code difficile de le dire

Du coup si c'est bien le cas, si j'utilise un width 50% ou moins pour réduire, en théorie mes deux blocks devraient se placer l'un à coté de l'autre non ?

Non, pour deux raisons :

• comme le mentionne Nyut les bordures ne comptent pas dans la largeur, sauf si box-sizing: border-box s'applique
• tes blocks se comportent comme les mots d'une phrase, donc s'ils sont espacés dans ton code il apparaîtra un espace entre eux

Plutôt que d'essayer d'implémenter ton layout de cette façon, continue ton apprentissage, tu verras qu'il existe beaucoup plus adapté !