2 kolumnowa strona[HTML]

Dziś pokaże wam jak najłatwiej stworzyć siatkę strony pod dwie kolumny nie wykorzystując niemodnych i niefajnych tabel.
Kod html:

Kod: Zaznacz cały

1. <div id="exCenter">


2.     <div id="exHeader">


3.         Nagłówek strony


4.     </div>


5.     <div id="exContent">


6.         <div id="exLeftColumn">


7.             <p>Lewa kolumna</p>


8.         </div>


9.         <div id="exRightColumn">


10.             <p>Prawa kolumna</p>


11.             <p>Prawa kolumna</p>


12.             <p>Prawa kolumna</p>


13.         </div>


14.         <div class="exClear"></div>


15.     </div>


16.     <div id="exFooter">


17.         <p>Stopka strony</p>


18.     </div>


19. </div>

CSS:

Kod: Zaznacz cały

1. #exCenter{


2.     width:300px;


3.     margin:auto;


4. }


5. #exHeader,#exContent,#exFooter{


6.     background-color:#f1f1f1;


7.     border:solid 1px #CCCCCC;


8.     margin-bottom:2px;


9. }


10. #exLeftColumn{


11.     float:left;


12.     width:149px;


13.     background-color:#00CCFF;


14. }


15. #exRightColumn{


16.     float:right;


17.     width:149px;


18.     background-color:#CCCCCC;


19. }


20. .exClear{


21.     clear:both;


22.     line-height:0px;


23. }