Discussion :

[momjunior]

Bonjour

J'ai 2 divs que je voudrais placer l'un en-dessous de l'autre, pour cela j'utilise la propriété inline-block pour chacun des divs:

Code :

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

1
2
3
4
5
6
7
.div1 {
display: inline-block ;
}
 
.div2 {
display: inline-block ;
}

Et ça marche. Sauf que lorsque j'ajoute un max-width, les 2 divs se retrouvent sur la même ligne.

Code :

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

1
2
3
4
5
6
7
8
9
.div1 {
display: inline-block ;
max-width: 100px;
}
 
.div2 {
display: inline-block ;
max-width: 100px;
}

Comment régler ce problème?

[darkstar123456]

Bonjour,

Si tu souhaites placer des blocs l'un en dessous de l'autre, c'est le comportement par défaut d'un block
Le fait de le passer en inline-block va justement provoquer le fait qu'ils sont juste à côté l'un de l'autre.

Donc si tu veux forcer leur superposition, utilise plutôt "display:block"; (et si tu utilises des <div> tu n'as rien à faire car ce sont déjà des display: block par défaut )

[momjunior]

Sauf que quand je mets "block" au lieu de "inline-block", le "max-width" agrandit le div au maximum, même lorsque le contenu est petit.

Voici des captures d'écran:

1er cas:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
.div1 {
background-color:red;
max-width:780px;	
display: block ;
}
 
.div2 {
background-color:yellow;
max-width:780px;
display: block ;
}

2e cas:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
.div1 {
background-color:red;
max-width:780px;	
display: inline-block ;
}
 
.div2 {
background-color:yellow;
max-width:780px;
display: inline-block ;
}

Donc j'aurais pu utiliser un <br> juste après le 1er div mais je souhaiterai m'en passer.

[darkstar123456]

Bonjour,

Je pense qu'il y a une partie de ton code que tu ne nous montre pas et c'est ça qui provoque le problème.

Voici un essai réalisé sur base de ton code : https://tests.pierre-roels.com/max-width.php
On voit bien que les max-width sont respectés, peu importe ce qu'il y a dedans

Et voici le code complet de la page :

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
<style>
    .div1, .div2 {
        display: block;
        padding: 15px;
    }
    .div1 {
        background-color:red;
        max-width:780px;        
    }
 
    .div2 {
        background-color:yellow;
        max-width:380px;
    }
</style>
<div class="div1">div1</div>
<div class="div2">Lorem ipsum dolor sit amet</div>

[Invité]

Bonjour,

Ce n'est pourtant pas bien compliqué...

1- La solution la plus simple : un simple <br /> !

Code html :

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

1
2
3
<div class="div1">div1</div>
<br />
<div class="div2">Lorem ipsum dolor sit amet</div>

2- Une autre solution serait de mettre un <div> vide entre les deux :

Code html :

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

1
2
3
<div class="div1">div1</div>
<div></div>
<div class="div2">Lorem ipsum dolor sit amet</div>

3- ou encadrer chacun par des <div> :

Code html :

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

1
2
3
4
5
6
<div>
  <div class="div1">div1</div>
</div>
<div>
  <div class="div2">Lorem ipsum dolor sit amet</div>
</div>

Code css :

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

1
2
3
4
5
6
7
  .div1, .div2 {
    display: inline-block;
    padding: 15px;
    max-width:780px;        
  }
  .div1 { background-color:red; }
  .div2 { background-color:yellow; }

N.B. Contrairement au <br />, cette 3ème solution est plus "flexible", et permet éventuellement de modifier facilement la mise en page selon la largeur de fenêtre.

[abdennour bouaicha]

salut,
met dans chaque balise float:none; c'est elle qui force la div a ne pas être à cote d'un autre élément ,par contre float:left ou float:right met le div a gauche ou a droite de l’élément qui le suit dans le code.

Code :

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

1
2
3
4
5
6
7
 
.div1{
        float:none;
}
.div2{
        float:none;
}

[momjunior]

Merci beaucoup, toutes les méthodes que vous m'avez proposées marchent.

[Invité]

Tiens,

une 4ème solution *, très simple :

Code html :

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

1
2
3
<div class="div1"><span>div1</span></div>
 
<div class="div2"><span>Lorem ipsum dolor sit amet</span></div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.div1 > span, .div2 > span {
  display:inline-block;
  padding: 15px;
}
.div1 > span {
  background:red;
  font-size:140%;
  color:white;
}
.div2 > span {
  background:yellow;
  color:red;
}

* une variante de la 3ème, en mettant les classes sur les div parents.