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: ,

Projektowanie stron internetowych

Leave a Reply