Développez les div pour prendre la largeur restante

Question

Je veux un à deux colonnes div disposition, où chacun peut faire de largeur variable par exemple

<div style="float:left">Tree</div>
<div style="float:left">View</div>

Je veux 'vue' div de l'étendre à toute la largeur disponible après l '"arbre" div a rempli l'espace nécessaire. Actuellement, mon 'vue' div est redimensionnée pour le contenu qu'il contient Il sera bon aussi si les deux divs prendre toute la hauteur

Pas double emploi avertissement:

http://stackoverflow.com/questions/1017880/expand-div-to-max-width-when-floatleft-is-set parce qu'il y gauche a une largeur fixe

http://stackoverflow.com/questions/727012/help-with-div-make-div-fit-the-remaining-width parce que j'ai besoin de deux colonnes à la fois aligné à gauche

Answer 1

La solution est en fait très facile, mais pas du tout évident. Vous devez déclencher quelque chose qui s'appelle un "bloc de mise en forme de contexte" (BFC), qui interagit avec les chars d'une manière spécifique.

Il suffit de prendre cette deuxième div, retirer le flotteur, et donnez - overflow:hidden à la place. Tout dépassement de valeur autre que visible rend le bloc, il est mis sur le devenir de BFC. BFCs ne permettent pas de descendant des flotteurs de leur échapper, ils ne permettent frère/ancêtre des flotteurs à s'immiscer dans leur. L'effet net est que la div flottant va le faire, puis de la deuxième div seront ordinaire bloc, occupant toute la largeur disponible sauf que occupé par le flotteur.

Cela devrait fonctionner sur tous les navigateurs actuels, bien que vous pourriez avoir à déclencher hasLayout dans IE6 et 7. Je ne me souviens pas.

Démos:

• Fixe à Gauche: http://jsfiddle.net/A8zLY/5/
• Fixe à Droite: http://jsfiddle.net/A8zLY/2/

Answer 2

Ce serait un bon exemple de quelque chose qui est trivial à faire avec tables et dur (sinon impossible, au moins dans un sens de la Croix-navigateur) faire avec CSS.

Si les deux colonnes sont de largeur fixe, cela serait facile.

Si une des colonnes était de largeur fixe, ce serait un peu plus difficile mais tout à fait faisable.

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

Answer 3

http://jsfiddle.net/k2734/3/

Vérifiez cette solution

CSS

 .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;
}
 

HTML

 <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>
 

Answer 4

Ici, cela pourrait aider...

Answer 5

Je ne comprends pas pourquoi les gens sont prêts à travailler si dur pour trouver une pure CSS solution pour de simples colonnes mises en page qui sont SI FACILES à l'aide de l'ancienne balise TABLE. Les navigateurs tous ont encore la table de la logique de présentation... Appelez-moi un dinosaure peut-être, mais je dis laisser vous aider.

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

Beaucoup moins risquée en termes de compatibilité inter-navigateur.