Inline-block dans div
Roger
-
Profil bloqué -
Profil bloqué -
Bonjour,
Lorsque que je mets la propriété inline-block pour ma balise nav (menu de gauche) et la balise section (texte à droite du menu de gauche et aligné avec celui ci), mes 2 blocks sont côte à côte, tout va bien.
Problème, lorsque je mets un <div> qui englobe tout la page, donc le div principal classique, ma section se retrouve en dessous du nav, est ce normal?
merci.
Lorsque que je mets la propriété inline-block pour ma balise nav (menu de gauche) et la balise section (texte à droite du menu de gauche et aligné avec celui ci), mes 2 blocks sont côte à côte, tout va bien.
Problème, lorsque je mets un <div> qui englobe tout la page, donc le div principal classique, ma section se retrouve en dessous du nav, est ce normal?
merci.
A voir également:
- Inline-block dans div
- Block breaker - Accueil - Services en ligne
- Code block - Télécharger - Langages
- Peer block - Télécharger - Pare-feu
- Block pub youtube - Accueil - Streaming
- Usb block - Télécharger - Pare-feu
9 réponses
oui, j'ai mis une largeur de 900px, mon nav a une largeur de 100px et ma section de 200px, et pourtant ils sont l'un en dessous de l'autre alors que dans le css j'ai bien précisé display: inline-block; pour les 2 balises...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
non ce n'est pas en ligne c'est juste un code ultra court, en gros j'ai un div qui englobe toute la page, dedans j'ai un nav et un section. Dans le css nav et section sont en inline-block, et quand je ne mets pas le div ils sont bien cote à cote, tandis que quand je mets le div section se trouve en dessous...
ok, regarde ce code html:
code css associé:
Rien ne marche, ils ne sont pas alignés et aucune largeur (150 et 300) n'est prise en compte. Et je ne souhaite surtout pas de float...
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="titi.css" /> <title> toto </title> </head> <body> <div id="main"> <div id="corps"> <nav> <ul> <li> <a href="#">Accueil</a></li> <li> <a href="#">Membres</a></li> </ul> </nav> <section> <p> blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </section> </div> </div> </body> </html>
code css associé:
#main
{
width: 1200px;
margin: auto;
}
#corps
{
margin-bottom: 10px;
}
nav
{
display: inline-block;
vertical-align: top;
width: 150 px;
border: 1px black solid;
}
section
{
display: inline-block;
vertical-align: top;
width: 300 px;
border: 1px black solid;
}
Rien ne marche, ils ne sont pas alignés et aucune largeur (150 et 300) n'est prise en compte. Et je ne souhaite surtout pas de float...
