web-dev-qa-db-fra.com

3 colonnes, la moyenne avec largeur flexible

J'aimerais avoir une mise en page composée de trois divs adjacents. Les divs latéraux ont une largeur statique (il peut changer via JavaScript) et Center div remplit une zone restante. Lorsque la taille de la première div change, cela n'affecte que le centre. Il est similaire à la table (avec rendu dynamique) composé de trois colonnes.

Ok, mais où est le problème. Le problème est que si je mettais une division flottante dans la première colonne, puis bloquez DIV dans les deuxième et troisième, Block DIVS se comporte de manière étrange. Ils sont rendus dans leur colonne ci-dessous flottant DIV de la première colonne.

Un exemple. Dans la première et deuxième colonne, j'ai flottant div et bloquer div dans la troisième colonne. Le bloc div est déplacé autour de la hauteur des divs flottants. Div dans la colonne centrale n'est pas décalée dans sa position Y uniquement qu'elle a une propriété à gauche.

J'aimerais que chacun des trois divs de disposition soit indépendant l'un sur l'autre. Je ne sais pas pourquoi les éléments de la troisième colonne flottent dans les deux premières colonnes (avec une propriété de flotteur).

CODE:

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

            </div>
        </div>
</div>

et résultat: résultat

Comment résoudre ce problème. Comment faire de toutes les divs de mise en page (colonnes) pour être indépendants les uns sur les autres. Des idées?

csspositioningcss-floatcss-tables
25
cartoon_20

Vous pouvez le faire en flottant col1 et col3 à gauche et à droite, avec une largeur fixe.

Ajoutez ensuite une marge gauche et droite sur Col2 égale à la largeur de Col1 et Col3.

Cela vous donne trois colonnes; Col1 et Col3 ayant une largeur fixe et col2 remplissant la largeur disponible:

col2's content box in blue, and its margins in yellow
(boîte de contenu de Col2 en bleu et ses marges en jaune) 

<div class='container'>
    <div class='right'>
        col3
    </div>
    <div class='left'>
        col1
    </div>
    <div class='middle'>
        col2
    </div>
</div>



.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}

Essayez ici: http://jsfiddle.net/22ybu/

BTW Si vous avez besoin d'affichage: table, affichage: rangée de table et affichage: cellule de table, utilisez une table ;-)

56
Arnaud Le Blanc