CSS à côté des div avec des Pixels et le Pourcentage de largeurs
J'ai deux div l' (côte à côte) à l'intérieur d'un div parent, je veux div occuper à 100% de l'espace restant (c'est à dire 100% - 200px) et doit toujours rester à côté de gauche de la div (pas à gauche ci-dessous div):
HTML:
<div id="wrapper" style="width: 100%;">
<div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
<div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
<div style="clear: both;"></div>
</div>
Vous devez vous connecter pour publier un commentaire.
Puisque vous avez seulement une a fixé la largeur de la colonne, flotter à gauche et c'est tout. Comme pour la deuxième colonne, ne spécifiez pas de flotteur et de largeur; cela permet de s'assurer qu'il est à 100% de largeur. Mais vous devez ajouter une marge gauche, sinon la deuxième colonne d'interférer avec l'flottait colonne par exemple
HTML:
faire le parent wrapper
float
. Aussi, vous auriez probablement souhaitez supprimer lewidth: 100%
dans le deuxième enfant div. Et avoir une largeur définie par la quantité de contenu à l'intérieur. Ou vous pourriez avoir de pourcentage pour les deux enfants de la vrd. Exemple30%
et70%
.Démo ici
Ajouter des propriétés de position, à droite div. Gauche div 200px et droit div occupe l'espace restant.
Vérifier exemple de travail à http://jsfiddle.net/EpA5F/1/
Ok, donc sur les navigateurs les plus récents, nous serons en mesure d'utiliser display: boîte et la boîte-flex: 1,... propriétés.
Je suis actuellement en utilisant ce dans un webproject où seul le Chrome est nécessaire, de manière à ce nouveau CSS3 chose, a résolu beaucoup de problèmes pour moi.
votre gauche div doit avoir flotter à gauche et à sa largeur de pixel à l'aide de la position relative.
Votre droit div ne devrait avoir que de la position relative et peut-être de trop-plein caché.
Cela devrait résoudre votre problème.
Pas besoin d'utiliser l'utilisation de la div qui efface le flotteur.
Accepté la réponse est bonne, mais j'ai eu un problème où la colonne de droite underlapped mon menu comme il a été flottant ainsi.
Avec les navigateurs modernes vous pouvez maintenant avoir tous les éléments flottants et obtenir le même effet avec refroidisseur CSS. À l'aide de "largeur: calc(100% - 380px);" signifie que vous pouvez flotter vos éléments, de les faire correctement positionné, et l'air cool...
Démo http://jsfiddle.net/auUB3/1/
Si vous voulez à droite
div
avoir de largeur constante:Et CSS
Les bonnes œuvres sans frontières
JSFiddle