Deux div côte à côte - Affichage fluide


222

J'essaie de placer deux div côte à côte et d'utiliser le CSS suivant pour cela.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

Le HTML est simple, deux div gauche et droit dans un div wrapper.

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

J'ai essayé tant de fois de chercher un meilleur moyen sur StackOverflow et d'autres sites aussi, mais je n'ai pas pu trouver l'aide exacte.

Ainsi, le code fonctionne très bien à première vue. Le problème est que le div gauche obtient automatiquement le remplissage / la marge lorsque j'augmente la largeur en (%). Donc, à 65% de largeur, le div gauche a un rembourrage ou une marge et n'est pas parfaitement aligné avec le div droit, j'ai essayé de rembourrage / marge 0 mais pas de chance. Deuxièmement, si je fais un zoom avant sur la page, la div droite glisse sous la div gauche, son affichage n'est pas fluide.

Remarque: je suis désolé, j'ai beaucoup cherché. Cette question a été posée plusieurs fois mais ces réponses ne m'aident pas. J'ai expliqué quel est le problème dans mon cas.

J'espère qu'il y a une solution à cela.

Je vous remercie.

EDIT: Désolé, moi problème HTML, Il y avait deux divs "box" dans les côtés gauche et droit, Ils avaient un remplissage en%, Donc le côté gauche a montré plus de remplissage en raison d'une plus grande largeur. Désolé, le CSS ci-dessus fonctionne parfaitement, son affichage fluide et fixe, Désolé de poser la mauvaise question ...


1
Il y avait deux boîtes divs? Qu'est-ce qu'une boîte div? Cette question n'est pas claire.
john ktejik

Réponses:


252

Essayez plutôt un système comme celui-ci:

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}
<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

Vous ne devez faire flotter un div que si vous utilisez une marge gauche sur l'autre égale à la largeur du premier div. Cela fonctionnera quel que soit le zoom et n'aura pas de problèmes de sous-pixel.


1
Cela n'aide pas, le zoom est maintenant corrigé, il est dit fixe, mais le div droit est maintenant glissé et fixé à cette position
Waleed

Vous avez probablement gâché quelque chose, vérifiez votre code ou dites-moi le lien vers jsFiddle et regardez-le mal.
dezman

aww mec, je suis désolé. Les divs étaient déjà fixés par mon CSS ci-dessus que j'ai donné, c'est juste les divs "box" à gauche et à droite, avaient un remplissage et une marge en%, parce que le div droit était court c'est pourquoi, il avait un remplissage et des marges de demande. Désolé ...
Waleed

Ne devrait-il pas en <section>être un à la <div>place?
jvriesem

218

C'est facile avec une flexbox:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}
<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>


5
Nice, flexbox est définitivement la voie à suivre
Julian Soro

4
Selon ce site, flex devrait fonctionner sur 94% des navigateurs. caniuse.com/#search=flex
Adrian

8
@JoostS n'est-ce pas que 94% des différents navigateurs disponibles (car il fonctionne toujours sur Chrome, Mozilla, IE, etc.), pas qu'il fonctionne 94% du temps quel que soit le navigateur?
Joe

6
Actuellement, il s'élève à 97 +%. Fondamentalement, je dirais que si vous n'avez pas besoin de cibler IE8, optez pour Flexbox, dans ce cas et d'autres. Les solutions Flexbox sont presque toujours plus élégantes et plus faciles à raisonner.
Alan Thomas

6
Si vous avez un site Web existant, ne passez jamais par le partage du navigateur, consultez vos propres journaux de trafic. Sur la plupart de mes sites, IE8 ne représente qu'environ 0,01% du trafic. Cependant ... J'ai vu des sites spécifiques où le public est des utilisateurs dans des sociétés, des gouvernements ou des organisations à but non lucratif utilisant beaucoup de logiciels hérités, et l'utilisation d'un ancien navigateur IE peut être étonnamment élevée.
cazort

95

Utilisation de ce CSS pour mon site actuel. Cela fonctionne parfaitement!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

49
Heureux d'apprendre que vous avez trouvé et accepté votre propre réponse, mais qu'est-ce que #sides? Ce n'est pas dans votre question d'origine.
JMD

2
Utiliser float: laissé sur les deux enfants (#right) va tuer la hauteur du div parent (#wrapper). Cette solution dépend donc de l'exigence. Mieux vaut donner un flotteur à un seul enfant (# laissé dans votre cas)
Rahul Gandhi

8

Voici ma réponse pour ceux qui recherchent Google:

CSS:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

Voici le HTML:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

3

Faites les deux divs comme ça. Cela alignera les deux divisions côte à côte.

.my-class {
  display : inline-flex;
} 

1

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 
<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->


Quelle est la raison du débordement: caché? Cela ne semble pas nécessaire ...
Honza

0
   <div style="height:50rem; width:100%; margin: auto;">
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left; background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
   </div>

la marge de droite n'est cependant pas nécessaire.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.