Comment puis-je faire flotter deux divs côte à côte sans spécifier de largeur?

J'ai deux divs, la première n'a pas beaucoup de contenu et le second a beaucoup de contenu. Je veux qu'ils flottent côte à côte tels que le premier div est aussi large que le texte et la deuxième div remplit le reste de la quantité d'espace horizontal. Et, je ne veux pas de spécifier des largeurs fixes.

Ici est l'apparence souhaitée à l'aide de tableaux:
http://jsfiddle.net/enRkR/

Cela peut facilement être fait avec CSS flotteurs, ou un tableau de mise en page, la seule façon d'obtenir ce look?

source d'informationauteur Nick Clark

  1. 60

    Oui, vous pouvez le faire avec css & c'est un travail dans tous les navigateurs. Faire comme ceci:

    .right{
    overflow:hidden;
    background:red;
}
.left{
    float:left;
    background:green;
}

    Vérifier ce live exemple http://jsfiddle.net/enRkR/8/

  2. 2
    <div style="float:left">less content</div>
<div>More content More content
</div>
  3. 1

    Essayez ceci : 

    <div>
  <div id="div1" style="float:left">
     content
  </div>
  <div id="div2" >
     content
  </div>
<div>

    Ou

    reportez-vous ceci : Comment le style des éléments Div, comme les Tables

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head><title>table using divs</title>
<style type="text/css">
    .div-table{display:table; border:1px solid #003399;}
    .div-table-caption{display:table-caption; background:#009999;}
    .div-table-row{display:table-row;}
    .div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;}
</style>
</head>
<body>
<div class="div-table">
    <div class="div-table-caption">This is a caption</div>
    <div class="div-table-row">
    <div class="div-table-col">1st Column</div>
    <div class="div-table-col">2nd Column</div>
</div>
</div>
</body>
</html>

    Remarque : À l'utilisation de ces valeurs de propriétés CSS, vous devez disposer d'un navigateur web qui prend en charge. Malheureusement, cela se traduit par un nombre limité de navigateurs comme IE 8, Firefox 3, Opera 9 et ainsi de suite