Dwie kolumny w css, bez używania tabeli

Jak zrobić dwie kolumny w css, bez używania tabeli?

Nagłówek strony

Lewa kolumna

Prawa kolumna

Prawa kolumna

Prawa kolumna

.

Stopka strony

HTML powyższego przykładu


<div id="exCenter">
    <div id="exHeader">
        Nagłówek strony
    </div>
    <div id="exContent">
        <div id="exLeftColumn">
            <p>Lewa kolumna</p>
        </div>
        <div id="exRightColumn">
            <p>Prawa kolumna</p>
            <p>Prawa kolumna</p>
            <p>Prawa kolumna</p>
        </div>
        <div class="exClear"></div>
    </div>
    <div id="exFooter">
        <p>Stopka strony</p>
    </div>
</div>

CSS powyższego przykładu


#exCenter{
    width:300px;
    margin:auto;
}
#exHeader,#exContent,#exFooter{
    background-color:#f1f1f1;
    border:solid 1px #CCCCCC;
    margin-bottom:2px;
}
#exLeftColumn{
    float:left;
    width:149px;
    background-color:#00CCFF;
}
#exRightColumn{
    float:right;
    width:149px;
    background-color:#CCCCCC;
}
.exClear{
    clear:both;
    line-height:0px;
}

Do rozmieszczenia kolumny lewej z lewej strony a prawej z prawej strony, posłużyć się można regułą css float. Odpowiednio dla lewej kolumny reguła float przyjmuje wertość float:left, a dla prawej float:right. To praktycznie by załatwiło sprawę, mamy kolumny tam gdzie trzeba. Al chcemy jeszcze żeby proporcje były takie jakie chcemy. Do określenia proporcji wykorzystuje się regułę width, podająć szerokość każdej z kolumn. Wszystko ładnie pięknie. Tylko narazie rodzic w którym umieszczone są kolumny, nie rozciąga się na wysokość kolumn. Można temu zaradzić wstawiając poniżej kolumn dodatkowy div z regułą clear:both, spowoduje to rozciągnięcie rodzica. Rozciągniety element rodzic przydać nam się może do ustawiania odpowiedniego tła jednej z kolumn. Warto też ustawić wysokość lini elementu clear line-height:0px wtedy w każdej przeglądarce zajmie on tyle samo wysokości – 0px. Do wycentrowania całego układu posłużył jeden dodatkowy element div, z ustawioną regułą margin:auto.

Tags: ,

Leave a Reply