Discussion :

[dadaboss92]

Bonjour,

Je souhaite que les coordonnées du site soit sur la gauche et que la map soit à droite. J'essaye que ce soit responsive, que la map s'adapte et descende sous le texte lors du zoom. Je bloque, pouvez vous m'aider svp


le html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="Global">
						<div id="gauche"> 
						<h1>Contact</h1>
						<p>1 rue bidon</p>
						</div>
 
						<div id="droite">
						<div class="map-responsive">
						   <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2626.1563142515106!2d2.234953315507061!3d48.83615701022629!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e67ae7245a2c9d%3A0x4b21331773b0459c!" width="450" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
						</div>
						</div>

Le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.map-responsive {
overflow:hidden;
padding-bottom:50%;
position:relative;>
height:0;
}
 
.map-responsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
 
#Global #gauche {
    float:left;
	width:30%;
}
#Global #droite {
    margin-left:30%;

[dadaboss92]

Voici la solution que l'on m'a donné

The first thing to do is to remove absolute positioning and the artificial margin-left.

A first attempt could be to set both elements as float: left.

Responsiveness is not just about floating elements, though, and I encourage you to read into this large subject.