Positionnement horizontal de deux Div

Résolu
bonapara Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   -  
bonapara Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   -
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 2829 Date d'inscription   Statut Membre Dernière intervention   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 2829 Date d'inscription   Statut Membre Dernière intervention   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 14 Date d'inscription   Statut Membre Dernière intervention  
 
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 14 Date d'inscription   Statut Membre Dernière intervention  
 
C'était bien le white space.. Merci beaucoup ce n'était pas évident à trouver ! Vivement Css 4 ! Bonne soirée.
0