Je veux une disposition div à deux colonnes, où chacune peut avoir une largeur variable, par exemple

div {
  float: left;
}

.second {
  background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

Je veux que le div «view» s'étende sur toute la largeur disponible après que le div «tree» ait rempli l'espace nécessaire.

Actuellement, ma div «view» est redimensionnée au contenu qu'elle contient. Ce sera également bien si les deux div occupent toute la hauteur.

Clause de non-responsabilité:

• Développez div à la largeur maximale lorsque float: left est défini parce que celui de gauche a une largeur fixe.
• Aide avec div - faites div div ajuster la largeur restante car j'ai besoin de deux colonnes alignées à gauche

La solution à cela est en fait très facile, mais pas du tout évidente. Vous devez déclencher quelque chose appelé un "contexte de formatage de bloc" (BFC), qui interagit avec les flotteurs d'une manière spécifique.

Prenez simplement ce deuxième div, retirez le flotteur et donnez-le à la overflow:hiddenplace. Toute valeur de débordement autre que visible fait que le bloc sur lequel il est défini devient un BFC. Les BFC n'autorisent pas les flotteurs descendants à leur échapper, pas plus qu'ils ne permettent aux flotteurs frères / ancêtres de s'introduire en eux. L'effet net ici est que le div flotté fera son travail, alors le deuxième div sera un bloc ordinaire, occupant toute la largeur disponible sauf celle occupée par le flotteur .

Cela devrait fonctionner sur tous les navigateurs actuels, mais vous devrez peut-être déclencher hasLayout dans IE6 et 7. Je ne m'en souviens pas.

Démos:

• Gauche fixe: http://jsfiddle.net/A8zLY/5/
• Correction à droite: http://jsfiddle.net/A8zLY/2/

Je viens de découvrir la magie des boîtes flexibles (affichage: flex). Essaye ça:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Les boîtes flexibles me donnent le contrôle que j'aurais souhaité avoir depuis 15 ans. C'est enfin là! Plus d'informations: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Solution Flexbox

C'est à cela que sert la flex-growpropriété.

html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}

<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>

Remarque: Ajoutez des préfixes de fournisseur flex si requis par les navigateurs pris en charge .

Ce serait un bon exemple de quelque chose de trivial à faire avec des tables et difficile (sinon impossible, au moins dans un sens multi-navigateur) à faire avec CSS.

Si les deux colonnes avaient une largeur fixe, ce serait facile.

Si l'une des colonnes avait une largeur fixe, cela serait légèrement plus difficile mais entièrement réalisable.

Avec les deux colonnes à largeur variable, à mon humble avis, vous devez simplement utiliser un tableau à deux colonnes.

Découvrez cette solution

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

Utilisation calc:

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

Le problème avec cela est que toutes les largeurs doivent être définies explicitement, soit en tant que valeur (px et em fonctionnent correctement), soit en pourcentage de quelque chose qui se définit explicitement.

Ici, cela pourrait aider ...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

Je ne comprends pas pourquoi les gens sont prêts à travailler si dur pour trouver une solution pure CSS pour des mises en page simples en colonnes qui sont si faciles à utiliser avec l'ancienne TABLEbalise.

Tous les navigateurs ont toujours la logique de disposition des tableaux ... Appelez-moi peut-être un dinosaure, mais je dis que cela vous aide.

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

Beaucoup moins risqué en termes de compatibilité entre navigateurs également.

Si la largeur de l'autre colonne est fixe, pourquoi ne pas utiliser la calcfonction CSS pour tous les navigateurs courants :

width: calc(100% - 20px) /* 20px being the first column's width */

De cette façon, la largeur de la deuxième ligne sera calculée (c'est-à-dire la largeur restante) et appliquée en conséquence.

Vous pouvez essayer la disposition de grille CSS .

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

flex-grow - Ceci définit la capacité d'un élément flex à se développer si nécessaire. Il accepte une valeur sans unité qui sert de proportion. Il dicte la quantité d'espace disponible à l'intérieur du conteneur flexible que l'article doit occuper.

Si la flex-croissance est réglée sur 1 pour tous les articles, l'espace restant dans le conteneur sera distribué également à tous les enfants. Si l'un des enfants a une valeur de 2, l'espace restant occuperait deux fois plus d'espace que les autres (ou il essaiera, au moins). Voir plus ici

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

Une implémentation légèrement différente,

Deux panneaux div (contenu + supplémentaire), côte à côte, se content paneldéveloppent s'ils extra panelne sont pas présents.

jsfiddle: http://jsfiddle.net/qLTMf/1722/

Pat - Tu as raison. C'est pourquoi cette solution satisferait à la fois les «dinosaures» et les contemporains. :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}

<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

Vous pouvez utiliser la bibliothèque CSS de W3 qui contient une classe appelée restqui fait exactement cela:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

N'oubliez pas de lier la bibliothèque CSS dans la page header:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Voici la démo officielle: W3 School Tryit Editor

Je ne sais pas si c'est la réponse à laquelle vous vous attendez, mais pourquoi ne définissez-vous pas la largeur de l'arbre sur 'auto' et la largeur de 'vue' sur 100%?

Jetez un œil aux frameworks de disposition CSS disponibles. Je recommanderais Simpl ou, le cadre Blueprint un peu plus complexe.

Si vous utilisez Simpl (qui implique d'importer un seul fichier simpl.css ), vous pouvez le faire:

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

, pour une mise en page 50-50, ou:

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

, pour un 25-75.

C'est si simple.

Merci pour la prise de Simpl.css!

n'oubliez pas d'envelopper toutes vos colonnes ColumnWrappercomme ça.

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

Je suis sur le point de publier la version 1.0 de Simpl.css, alors aidez à passer le mot!

J'ai écrit une fonction javascript que j'appelle depuis jQuery $ (document) .ready (). Cela analysera tous les enfants de la division parent et ne mettra à jour que l'enfant le plus à droite.

html

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

javascript

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

C'est assez facile à utiliser avec flexbox. Voir l'extrait ci-dessous. J'ai ajouté un conteneur wrapper pour contrôler le flux et définir une hauteur globale. Des frontières ont également été ajoutées pour identifier les éléments. Notez que les divs se développent désormais également sur toute la hauteur, selon les besoins. Les préfixes du fournisseur doivent être utilisés pour flexbox dans un scénario réel car il n'est pas encore entièrement pris en charge.

J'ai développé un outil gratuit pour comprendre et concevoir des mises en page à l'aide de flexbox. Découvrez-le ici: http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}

<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

Si les deux largeurs sont de longueur variable, pourquoi ne calculez-vous pas la largeur avec certains scripts ou côté serveur?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>