Propriétés inline-block et max-width ?

Aligner deux divs sur une même ligne

a marqué ce sujet comme résolu.

Bonjour,

je cherche à aligner deux <div> sur une même ligne horizontale.

Le problème est que ceux-ci n'ont pas de valeur width fixe, mais une valeur max-width.

L'avantage est que ça "fonctionne" quelle que soit la taille d'écran de l'utilisateur.

Voici le code :

1
2
.gauche {background:red;display:inline-block;max-width:700px;}
.droite {background:blue;display:inline-block;max-width:400px;}

1
2
3
4
5
<div class="gauche">
a
</div><div class="droite">
a
</div>

Voici le rendu : https://jsfiddle.net/rp67ymLq/

Le problème est que les divs ne prennent pas toute la place, vu qu'il n'y a pas de width ou min-width spécifié.

J'ai aussi essayé en faisant ça :

1
2
.gauche {background:red;display:block;max-width:700px;}
.droite {background:blue;display:block;max-width:400px;}

Là ça prend toute la place, mais ils ne sont plus alignés horizontalement.

Il faut alors rajouter un float, ce qui me ramène au point de départ.

Avez-vous une solution pour garder l'affichage "dynamique" tout en résolvant ce problème d'affichage ?

Merci !

+0 -0

Ajout d'une div englobante dans le code HTML.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div id="container">

  <div class="gauche">
    gauche
  </div>

  <div class="droite">
    droite
  </div>

</div>

Le CSS avec flexbox.

1
2
3
4
5
6
7
8
#container {
  display: flex;
  margin: 0 auto;
  width: 1100px;
}

.gauche {background:red; width:700px;}
.droite {background:blue; width:400px;}

Pour le responsive faut gérer avec les medias queries.

+0 -0

A noter que ce n'est pas float: flex; mais display: flex (ou alors, j'ai effectivement raté un autre pan du CSS?)

Oulà oui tu as raison bien sur ! Je corrige ça tout de suite :p

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte