Positionnement horizontal de deux Div
Résolu
Bonjour,
Je suis embêté, car malgré les différents tutoriels présents sur Internet, je n'ai pas réussi à appliquer les solution à mon problème.
Je n'arrive pas à afficher mes deux div à coté l'un de l'autres, ils sont toujours l'un au dessus de l'autre même si l'un est à droite et l'autre à gauche. Ils sont inclus dans un autre div. Je souhaiterais que la div image s'affiche à droite et mon div texte à gauche.
Mon Html:
<div id="banniere_description">
<div id="parades"><p>Notre maison se situe au coeur du vieux Port Joinville à 100 mètres du port. Elle donne une proximité directe des commerces et des services utiles (supermarché, maison de la presse, galeries d'art, poissonnier, office du tourisme, médecin, pharmacie...)</p><div>
<div id="photodedroite"> <img src="Pictures/mqmaisonext.jpg" alt="" /></div>
</div>
Mon Css:
#banniere_description { height: 316px;
width: 100%;
clear: both;
margin: 0 auto;}
#parades {
display:inline-block;
font-size: 1.3em;
font-weight: bold;
width:605px;}
#photodedroite {
display:inline-block;
width: 295px;;
}
Merci beaucoup !
Je suis embêté, car malgré les différents tutoriels présents sur Internet, je n'ai pas réussi à appliquer les solution à mon problème.
Je n'arrive pas à afficher mes deux div à coté l'un de l'autres, ils sont toujours l'un au dessus de l'autre même si l'un est à droite et l'autre à gauche. Ils sont inclus dans un autre div. Je souhaiterais que la div image s'affiche à droite et mon div texte à gauche.
Mon Html:
<div id="banniere_description">
<div id="parades"><p>Notre maison se situe au coeur du vieux Port Joinville à 100 mètres du port. Elle donne une proximité directe des commerces et des services utiles (supermarché, maison de la presse, galeries d'art, poissonnier, office du tourisme, médecin, pharmacie...)</p><div>
<div id="photodedroite"> <img src="Pictures/mqmaisonext.jpg" alt="" /></div>
</div>
Mon Css:
#banniere_description { height: 316px;
width: 100%;
clear: both;
margin: 0 auto;}
#parades {
display:inline-block;
font-size: 1.3em;
font-weight: bold;
width:605px;}
#photodedroite {
display:inline-block;
width: 295px;;
}
Merci beaucoup !
4 réponses
-
tu t'es trompé ici ouverture de div au lieu de fermeture de div
.....r, office du tourisme, médecin, pharmacie...)</p><div> --> tu as ouvert une div au lie de la fermer en faisant </div>
et aussi width: 295px;; 2fois le point virgule a #photodedroite
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus. -
Merci pour ces erreurs, je n'y avais pas fait attention. Toutefois mon problème persiste, les deux éléments ne s'affichent pas côte à côte...
-
A mon avis
soit tu as fait un mauvais calcul : addition des width des div inline-block supéruieur au width du conteneur de la page
soit tu n'as pas tenu compte du white space généré par inline-block
https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html
soit l'image est trop grande donc mettre
#photodedroite img {
width:100%;
}
et pas de dimension img dans le html
ou sinon avec float
#parades {
float:left;
font-size: 1.3em;
font-weight: bold;
width:605px;
vertical-align:top;
}
#photodedroite {
width: 295px;
margin-left:605px;
}
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus. -
C'était bien le white space.. Merci beaucoup ce n'était pas évident à trouver ! Vivement Css 4 ! Bonne soirée.
