CSS 'colonne' fluide

Question

Quel est le meilleur moyen d'obtenir cette mise en page en CSS? Imaginez que j'ai trois divs, deux divs à l'intérieur d'un autre .. des deux divs internes, le premier a un ensemble de largeur spécifique, et le second div devrait occuper l'espace restant.

En général, je finirais par définir une largeur spécifique sur la deuxième colonne, et gérer la mise à jour à la fin que la largeur div divisée a changé.

Si je flotte le fixe mais pas le fluide, la colonne de fluide s'enroulera sous la div fixe (pas ce qui est voulu).

+-------+ +--------------------------------------+ 
| fixed | |          | 
+-------+ |    fluid     | 
      |          |   
      |          | 
      +--------------------------------------+ 

<div> 
    <div>fixed</div> 
    <div>fluid</div> 
</div> 

Ce doit être une solution entièrement css, javascript ne frameworks- et fonctionne idéalement sur les navigateurs les plus couramment utilisés avec un minimum « hackage » (le cas échéant).

espère que les œuvres d'art ASCII,

Merci.

Answer 1

le balisage

<div id="fixed">fixed content</div> 
<div id="fluid">fluid content</div> 

le css

#fixed { 
    float: left; 
    width: 13em; 
    margin-right: -14em; 
} 
#fluid { 
    margin-left: 14em; 
} 

Cela devrait faire l'affaire. Je l'utilise sur mon site personnel. Les marges font que tout reste au même niveau.

Answer 2

Espérons que cela au moins vous aide à démarrer:

* { 
    margin:0; 
} 

div#wrapper { 
    margin:0; 
    height:auto !important; //IE Hack 
    height:100%; //IE Hack 
    min-height:100%; 
    overflow:auto 
} 

div#fixed{ 
    float:left; 
    position:absolute; 
    background-color:red; 
    margin:0; 
    height:200px; 
    width:200px 
} 

div#fluid{ 
    float:right; 
    position:absolute; 
    left:200px; 
    background-color:blue; 
    display:block; 
    height:80%; 
    width:60% 
} 

Le "wrapper" serait votre div d'emballage. J'ai seulement mis la colonne de fluide à une largeur de 60% afin que vous puissiez voir qu'il devrait agir de manière fluide. J'ai testé cela dans Opera 10, IE 6 et Firefox 3 avec seulement des problèmes mineurs. IE veut ajouter 200px supplémentaires à droite si vous définissez la largeur de la colonne fluide à 100%. Je suis sûr qu'il y a un travail pour ça quelque part.

Answer 3

Vous pouvez utiliser Emastic CSS Framework qui supporte les colonnes de fluide. Ici, Link est un exemple de travail similaire à votre "travail d'art ASCII" :)

Answer 4

Il ya effectivement une solution encore plus facile à ce que j'ai découvert il n'y a pas si longtemps. Fonctionne bien à IE7. Le div #fluid va glisser à côté du correctif fixe et occuper l'espace restant tout en conservant une grande fluidité pour tous les sites sensibles.

#fixed{ 
    width:200px; 
    float:left; 
} 
#fluid{ 
    overflow:hidden; 
}