Positionnement horizontal de deux Div

Résolu
bonapara Messages postés 17 Statut Membre -  
bonapara Messages postés 17 Statut Membre -
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 !

4 réponses

animostab Messages postés 3003 Statut Membre 738
 
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.
1
animostab Messages postés 3003 Statut Membre 738
 
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.
1
bonapara Messages postés 17 Statut Membre
 
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...
0
bonapara Messages postés 17 Statut Membre
 
C'était bien le white space.. Merci beaucoup ce n'était pas évident à trouver ! Vivement Css 4 ! Bonne soirée.
0