Positionnement

Bonjour, je souhaite aligner une map et un texte, j'ai beau tout essayer, j'ai même regarder sur différents forum mais je ne trouve pas la solution....

voici le HTML :

<div class="container-equitation">

<h1>Activités hivernales : Ski de fond</h1>

<button class="btn-global" data-toggle="collapse" data-target="#global">Station de ski de Brameloup</button>

<div id="global" class="collapse">

<div class="droite">

<h2>Centre équestre de Brameloup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

<img class="localisation" src="img/localisation.png">
<p class="localisation_text">Route de Sainte-Urcize<br>48260 Nasbinals</p>

<img class="tel" src="img/tel.png">
<p class="tel_text">05 65 65 65 65</p>

<img class="site" src="img/site.png">
<a href="http://www.equitation-aubrac-lozere.fr">equitation-aubrac-lozere.fr</a>

</div>

<div class="gauche">

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2837.5801982872986!2d3.038363315301325!3d44.66692797909968!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12b2de27c964b6f5%3A0x605201af02196a56!2sCentre+Equestre+Moisset!5e0!3m2!1sfr!2sfr!4v1503404409357" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

</div>
</div>

puis le CSS :

.container-equitation{
padding-right: 2%;
padding-left: 2%;
}

.btn-global{
background-color: #EFECCA;
width: 100%;
text-align: left;
font-size: 20px;
color: #C4A87D;
border: red 1px;
}

div#global.collapse.in{
border-bottom: 2px solid #EFECCA;
border-right: 2px solid #EFECCA;
border-left: 2px solid #EFECCA;
background-image: url(img/trait.jpg);
}



div.gauche{
width: 50%;
display: block;
}

div.droite{
width: 50%;
margin-left: 50%;
float: right;
display: inline;
}

iframe{
border : 0;
width: 100%;
padding: 1%
}

p{
text-align: justify;
display: inline-block;

}

.localisation{
width: 5%;
margin-left: 1%;
padding-bottom: 0px;
}

.tel{
width: 5%;
margin-left: 1%;

}

.site{
width: 5%;
margin-left: 1%;

}

.localisation_text{
position: relative;
}
Modifié par Lasylv (23 Aug 2017 - 14:56)

Salut,

pas trop compris ce que tu voulais faire, aligner quoi avec la map ? du texte ? lequel ?
au passage il y a des balises code pour rendre ça plus agréable à la vue.

Ton code est-il testable quelque part ?