CSS deux divs côte à côte

Je veux mettre deux <div>s côte à côte. La droite <div>est d'environ 200 pixels; et la gauche <div>doit remplir le reste de la largeur de l'écran? Comment puis-je faire ceci?

Vous pouvez utiliser flexbox pour disposer vos articles:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Il s'agit simplement de gratter la surface de la flexbox. Flexbox peut faire des choses assez étonnantes.

Pour une prise en charge de navigateur plus ancienne, vous pouvez utiliser CSS float et une propriété width pour le résoudre.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Je ne sais pas si c'est toujours un problème actuel ou non, mais je viens de rencontrer le même problème et j'ai utilisé la display: inline-block;balise CSS . Envelopper ces derniers dans un div afin qu'ils puissent être positionnés de manière appropriée.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

Notez que l'utilisation de l'attribut de style en ligne n'a été utilisée que pour la brièveté de cet exemple, bien sûr, ceux-ci ont été déplacés vers un fichier CSS externe.

Malheureusement, ce n'est pas une chose triviale à résoudre pour le cas général. La chose la plus simple serait d'ajouter une propriété de style css "float: right;" à votre div 200px, cependant, cela entraînerait également que votre division "principale" soit réellement pleine largeur et tout texte là-bas flotterait autour du bord de la division 200px, ce qui semble souvent bizarre, selon le contenu (à peu près dans tous les cas sauf si c'est une image flottante).

EDIT: Comme suggéré par Dom, le problème d'emballage pourrait bien sûr être résolu avec une marge. Que je suis bête.

La méthode suggérée par @roe et @MohitNanda fonctionne, mais si le bon div est défini comme float:right;, alors il doit venir en premier dans la source HTML. Cela rompt l'ordre de lecture de gauche à droite, ce qui peut prêter à confusion si la page est affichée avec les styles désactivés. Si tel est le cas, il pourrait être préférable d'utiliser un div wrapper et un positionnement absolu:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

Démontré:

Edit: Hmm, intéressant. La fenêtre d'aperçu affiche les divs correctement formatés, mais pas l'élément de publication rendu. Désolé alors, vous devrez l'essayer par vous-même.

J'ai rencontré ce problème aujourd'hui. Sur la base des solutions ci-dessus, cela a fonctionné pour moi:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

Faites simplement diviser le parent sur toute la largeur et faire flotter les div contenus.

METTRE À JOUR

Si vous devez placer des éléments sur une ligne, vous pouvez utiliser Flex Layout . Voici un autre tutoriel Flex . C'est un excellent outil CSS et même s'il n'est pas compatible à 100%, chaque jour son support s'améliore. Cela fonctionne aussi simplement que:

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

Et ce que vous obtenez ici est un conteneur d'une taille totale de 4 unités, qui partage l'espace avec ses enfants dans une relation de 1/4 et 3/4.

J'ai fait un exemple dans CodePen qui résout votre problème. J'espère que ça aide.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

TRÈS VIEUX

C'est peut-être juste un non-sens, mais avez-vous essayé avec une table? Il n'utilise pas directement CSS pour positionner les divs, mais cela fonctionne très bien.

Vous pouvez créer une table 1x2 et mettre votre divsintérieur, puis mettre en forme la table avec CSS pour les mettre comme vous le souhaitez:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Remarque

Si vous voulez éviter d'utiliser le tableau, comme dit précédemment, vous pouvez utiliser float: left;et float: right;et dans l'élément suivant, n'oubliez pas d'ajouter un clear: left;, clear: right;ou clear: both;afin d'avoir la position nettoyée.

div1 {
    float: right;
} 
div2 {
    float: left;
}

Cela fonctionnera bien tant que vous définissez clear: bothl'élément qui sépare ce bloc de deux colonnes.

J'ai rencontré le même problème et la version Mohits fonctionne. Si vous souhaitez conserver votre ordre gauche-droite dans le html, essayez simplement ceci. Dans mon cas, le div gauche ajuste la taille, le div droit reste à la largeur 260px.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

L'astuce consiste à utiliser un remplissage à droite sur la boîte principale, mais à utiliser à nouveau cet espace en plaçant à nouveau la boîte de droite avec marge-droite.

J'utilise un mélange de float et overflow-x: hidden. Code minimal, fonctionne toujours.

https://jsfiddle.net/9934sc4d/4/ - PLUS vous n'avez pas besoin d'effacer votre flotteur!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

Comme tout le monde l'a souligné, vous le ferez en définissant un float:right;sur le contenu RHS et une marge négative sur le LHS.

Cependant .. si vous n'utilisez pas un float: left;sur le LHS (comme Mohit le fait), vous obtiendrez un effet de progression car le div LHS va toujours consommer l'espace marginal dans la mise en page.

Cependant .. le flottant LHS rétrécira le contenu, vous devrez donc insérer un nœud enfant de largeur définie si ce n'est pas acceptable, à quel moment vous pourriez aussi bien avoir défini la largeur sur le parent.

Cependant .. comme le souligne David, vous pouvez modifier l'ordre de lecture du balisage pour éviter l'exigence de flotteur LHS, mais cela présente des problèmes de lisibilité et éventuellement d'accessibilité.

Cependant .. ce problème peut être résolu avec des flotteurs étant donné un balisage supplémentaire

(mise en garde: je n'approuve pas la division .clearing dans cet exemple, voir ici pour plus de détails)

Tout bien considéré, je pense que la plupart d'entre nous souhaiteraient qu'il y ait une largeur non gourmande: rester dans CSS3 ...

Ce ne sera pas la réponse pour tout le monde, car il n'est pas pris en charge dans IE7-, mais vous pouvez l'utiliser et utiliser une autre réponse pour IE7-. Il s'agit de display: table, display: table-row et display: table-cell. Notez que cela n'utilise pas de tableaux pour la mise en page, mais le style divs afin que les choses s'alignent bien avec tous les tracas d'en haut. Le mien est une application html5, donc cela fonctionne très bien.

Cet article montre un exemple: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

Voici à quoi ressemblera votre feuille de style:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Pour paraphraser un de mes sites Web qui fait quelque chose de similaire:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

utilisez simplement un z-index et tout ira bien. assurez-vous d'avoir des positions marquées comme fixes ou absolues. alors rien ne bougera comme avec une balise flottante.