3 colonnes mise en page automatique milieu col largeur

Question

J'essaye de faire une page Web de disposition de 3 colonnes avec la largeur de wrapper de pourcentage, fixe (pixels) largeur de gauche et de droite et une largeur de colonne moyenne variable mais je ne peux pas l'obtenir pour le milieu colonne. Voici la source:

html

<aside class="left"> 
    <span>Categories</span> 


</aside> 

<section> 
    <span>Main</span> 

</section> 

<aside class="right"> 
    <span>Test</span> 

</aside> 

css

* { 
    margin: 0px; 
    padding: 0px; 

} 

html, body { 
    height: 100%; 
    width: 100%; 

} 

.container { 

    height: 100%; 
    width: 100%; 

} 

.container > aside.left { 
    float: left; 
    width: 197px; 
    border-right: black dashed 3px; 

} 

.container > section { 
    float: left; 
    width: auto; 


} 

.container > aside.right { 
    float: left; 
    background-color: #005f98; 
    width: 200px; 

} 

Answer 1

Avez-vous regardé le modèle de boîte flexible? http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Answer 2

Essayez de définir les largeurs selon des pourcentages, donc par exemple:

.container > aside.left { 
float: left; 
width: 31%; 
border-right: black dashed 3px; 

} 

.container > section { 
float: left; 
width: 31%; 


} 

.container > aside.right { 
float: left; 
background-color: #005f98; 
width: 31%; 

} 

C'est comment j'ai surmonté ce problème avant.

Answer 3

Si vous spécifiez width et float pour la colonne de gauche et à droite, la colonne centrale remplira automatiquement l'écart:

http://jsfiddle.net/xHnDX/4/

Comme vous pouvez le voir, la div contenu recouvre en fait les divs latéraux, Bien que le contenu restera entre eux. Si vous le souhaitez, vous pouvez ajouter un conteneur supplémentaire pour compenser la largeur de la div contenu comme indiqué ici:

http://jsfiddle.net/YauQc/

Answer 4

Vous pouvez remplacer vos flotteurs avec des barres latérales en position absolue:

<aside class="left"> 
    <span>C</span> 
</aside> 

<section> 
    <span>M</span> 
</section> 

<aside class="right"> 
    <span>T</span> 
</aside> 

Et

.left { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 50px; 
    display: block; 
    background: #ffe; 
    height: 100%; 
} 
.right { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50px; 
    display: block; 
    background: #fef; 
    height: 100%; 

} 
section { 
    display: block; 
    margin: 0 50px; /* Margin sized to match the sidebars */ 
    background: #fee; 
} 

en direct: http://jsfiddle.net/ambiguous/puPbu/

Les couleurs et les tailles sont juste pour clarifier où tout est. Si vous voulez mettre un wrapper <div> autour de l'ensemble, alors vous aurez besoin de position: relative pour obtenir les barres latérales positionnées au bon endroit.

Answer 5

Si vous n'avez pas à soutenir IE7, this will work:

* { 
    margin: 0px; 
    padding: 0px;  
} 
html, body { 
    height: 100%; 
    width: 100%;  
} 

.container { 
    display: table;  
    height: 100%; 
    width: 100%; 
    min-width: 600px; 

} 
.container > aside, .container > section { 
    display: table-cell; 
    width: auto; 
} 
.container > aside.left { 
    width: 197px; 
    border-right: black dashed 3px; 
} 

.container > aside.right { 
    background-color: #005f98; 
    width: 200px; 
} 

Answer 6

à CSS3 vous pouvez utiliser

#multicolumn{ 
    column-count: 3 
} 

vérifier sur http://jsfiddle.net/ilumin/w7F7c/

Référence: http://www.quirksmode.org/css/multicolumn.html