web-dev-qa-db-fra.com

Div CSS côte à côte avec largeur de pixel et de pourcentage

J'ai deux div (côte à côte) à l'intérieur d'un parent div, je veux juste que le div occupe à 100% de l'espace restant (c'est-à-dire 100% - 200px) et que je devrais toujours rester à côté de div (et non en dessous de div à gauche):

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>
htmlcssfluid-layout
19
Faizal Balsania

Puisque vous n’avez qu’une colonne de largeur fixe, faites-la flotter et c’est tout. Quant à la deuxième colonne, ne spécifiez pas les valeurs float et width; cela garantit qu'il est 100% large. Mais vous devez ajouter une marge de gauche; sinon, la deuxième colonne interfère avec la colonne flottante, par ex.

  • le fond aquatique apparaîtra derrière le fond bleu (éteignez le fond bleu pour voir ce que je veux dire)
  • si la deuxième colonne devient plus grande que la première, un contenu supplémentaire apparaîtra au-dessous de la première colonne.
<div id="wrapper">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
    <div style="clear: both;"></div>
</div>
40
Salman A

rendre le wrapper parent float. Aussi, vous voudrez probablement supprimer le width: 100% dans la deuxième div de l'enfant. Et avoir sa largeur définie par la quantité de contenu à l'intérieur. Ou vous pourriez avoir un pourcentage pour les deux divs enfants. Exemple 30% et 70%.

Démo ici

2
erickb

Ajouter les propriétés de position à votre droite div. La division gauche 200px et la division droite occupent l’espace restant.

#right{
    background-color:Aqua;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    left:200px;
}

Consultez l'exemple de travail sur http://jsfiddle.net/EpA5F/1/

2
Hussein

Ok, donc sur les nouveaux navigateurs, nous pourrons utiliser display: box; et box-flex: 1, ... propriétés. Je l'utilise actuellement dans un projet Web où seul Chrome est requis. Cette nouvelle fonctionnalité CSS3 a donc résolu beaucoup de problèmes.

1
Guillaume Schuermans

Si vous voulez que div ait une largeur constante:

 <div style="position:relative">
   <div class='wrapper'>
      <div style="width: 70%"></div>
      <div style="width: 20%"></div>
      <div style="width: 10%"></div>
      <div style="clear:both"></div>
   </div>
   <div class="constant-width"><div>
 </div>

Et CSS

 .wrapper{
     margin-right: CONSTANTpx;
 }
 .wrapper div{
     float:left;
 }
 .constant-width{
     top: 0px; right:0px; position:absolute;
     width: CONSTANTpx
 }

Fonctionne bien sans frontières

JSFiddle

0
ZuzEL

votre div gauche devrait avoir la valeur float gauche et sa largeur en pixels en utilisant la position relative. Votre div de droite ne devrait avoir qu'une position relative et peut-être un débordement masqué. Cela devrait résoudre votre problème. Pas besoin d'utiliser l'utilisation de la div qui efface le float.

0
Guillaume Schuermans

La réponse acceptée est bonne, mais j’ai eu un problème: la colonne de droite sous-jacente à ma sous-navigation car elle flottait également.

Avec les navigateurs modernes, vous pouvez maintenant avoir tous les éléments flottants et obtenir le même effet avec des CSS plus cool. Utilisation de "width: calc (100% - 380px)"; signifie que vous pouvez faire flotter vos éléments, les positionner correctement et avoir l'air cool ...

.container { float: left; width: 100%; }
.container__left { float: left; width: 380px; height: 100px; background: blue; }
.container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; }

Démo http://jsfiddle.net/auUB3/1/

0
Colin Wiseman