Placement des div responsive

**JuliaIta** · 22/05/2014, 15h21

Bonjour,

J'ai un problème avec le positionnement de mes div. En effet la partie contenu de mon site est composé de 3 colonnes. Une colonne du milieu avec le contenu principal (textes et photos) et 2 colonnes aux extrémités (à gauche et à droite)
Je réussi à tout placé comme je veux. Cependant j'aimerais que ça s'adapte à tout type de taille d'écran. Je veux que lorsque je réduit ma fenêtre les 2 colonnes se place en dessous mon texte.
Mon problème est le suivant: Quand mes 2 colonnes se place sous mon texte alors il se place sur mon footer ce que je ne veux pas. Je veux que les 2 colonnes se place en dessous ma colonne du milieu mais pas sur mon footer.
Ensuite, j'ai remarqué un autre problème quand je réduit la taille de ma fenêtre petit à petit mes 2 colonnes passent quelques pixel en dessous le texte de ma colonne du milieu alors que j'aimerais qu'il passe en dessous un peu avant afin qu'ils ne dépassent pas sur la div du milieu.

Merci.

**Muchos** · 23/05/2014, 05h59

Bonjour,
Au lieu de longues descriptions, on préfèrerait du code et/ou une page en ligne

Néanmoins, votre problème m'intéressait. Je vous propose donc un petit exemple de mise en page responsive sur 3 colonnes.
En grande résolution, les DIV sont alignées avec la DIV principale au centre, et en petite elles sont superposées avec la DIV principale en haut.

Code html :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Mise en page responsive sur trois colonnes.</title>
<style>
* {
  box-sizing: border-box;
  text-align: center;
}
div {
  height: 12em;
}
header,
footer {
  /* clear: both; */
  /* Pour FOOTER si besoin */
  height: 2em;
  background: #aaa;
}
.main {
  background: #ddd;
}
.a {
  background: #abc;
}
.b {
  background: #def;
}
 
@media screen and (min-width: 800px),
handheld and (min-width: 800px) {
/* Exemple de résolution */
div {
  display: inline-block;
  width: 33.33%;
}
.a {
  float: left;
}
.b {
  float: right;
}
}
</style>
</head>
<body>
<header>HEADER</header>
<div class="main">CENTER/TOP</div>
<div class="a">LEFT/MIDDLE</div>
<div class="b">RIGHT/BOTTOM</div>
<footer>FOOTER</footer>
</body>
</html>

Placement des div responsive

Responsive design en CSS

Discussions similaires

Partager

Partager