CSS - Colonnes à fluides fixes

Question

Dans le corps de mon site, j'essaie de créer deux colonnes - une à l'extrême droite avec une largeur fixe (300px) pour les publicités etc, et une à gauche qui va prendre la espace restant sur la page. Comment cela peut-il être accompli en CSS?

Answer 1

CSS:

#right-column{ 
width:300px; 
float:right; 
} 

#other-column{ 
float:left; 
width:100%; 
padding-right:20px; /*to prevent text overlap as suggested in the comment*/ 
} 

En HTML:

<div id='right-column'> 
<!-- ads here --> 
</div> 
<div id='other-column'> 
<!-- content here --> 
</div> 

Answer 2

Vous pouvez également consulter la YUI: CSS Grid Builder. Il s'agit d'une interface Web simple dans laquelle vous spécifiez la disposition de la grille que vous recherchez et qui vous fournira le code html que vous pouvez utiliser en combinaison avec le YUI Grids CSS framework pour obtenir la disposition souhaitée. Une bonne chose à propos du framework CSS YUI Grids est qu'il a good cross browser support ce qui vous fait gagner du temps à le faire fonctionner sur différents navigateurs. Vous pouvez également procéder à l'ingénierie inverse du code fourni par le créateur de grille pour obtenir des idées sur la façon de le faire par vous-même. Les paramètres que vous souhaitez utiliser avec le YUI: CSS Grille Builder pour obtenir votre mise en page souhaitée est la suivante:

1. Taille du corps: 100%
2. Colonnes du corps: la barre latérale droite 300px

Answer 3

ici est un outil pour generate fixed liquid columns pour placer des annonces AdSense.

Answer 4

Une solution que j'ai trouvée pour cela est de faire flotter la colonne de droite vers la droite et de donner à la colonne de gauche une position absolue avec à gauche: 0 et à droite: 300px. Cela le rendra fluide comme si vous lui donniez une largeur de 80%, mais ce sera par rapport au conteneur parent d'une manière différente.

Voici un exemple: http://jsfiddle.net/tkane2000/dp9GZ/

Une question que vous pourriez trouver avec cela est que puisqu'il est absolu, il ne poussera pas naturellement vers le bas les éléments en dessous.

Une autre solution possible consisterait à donner la colonne de gauche largeur: 100% padding-right: 300px;

et la colonne droite (largeur fixe): position: absolue: haut: 0; droite: 0;

Vous devrez peut-être définir la taille de la boîte: border-box dans la colonne de gauche.

Cela aussi comme certaines limitations. Cela me vient à l'esprit: si vous vouliez que la colonne de gauche ait une bordure-droite pour séparer chacun, la bordure serait du mauvais côté de la colonne de droite.

Answer 5

CSS:

.column-right { 
    float: left; 
    width: 100%; 
    height: 200px; 
    background-color: red; 
} 

.column-right .column-content { 
    margin-left: 250px; 
} 

.column-left { 
    float: left; 
    margin-left: -100%; 
    width: 250px; 
    height: 200px; 
    background-color: green; 
} 

HTML:

<div class="column-right"> 
    <div class="column-content"> 
     <strong>Right Column:</strong><em>Liquid</em> 
    </div> 
</div> 
<div class="column-left"> 
    <strong>Left Column:</strong><em>250px</em> 
</div>