Fluid layout
W dobie coraz większej ilości wszelakich urządzeń mobilnych tworzenie stron dostosowanych pod różne rozdzielczości jest już praktycznie standardem. Dziś opiszę jedną z technik wykorzystywanych w RWD (Responsive web design), a jest nią Fluid layout.
Krótko mówiąc, Fluid layout polega na tworzeniu „płynnych” układów stron. Możemy zrobić tak, że lewa kolumna (np. nawigacja) będzie mieć stałą szerokość, natomiast środek z treścią strony będzie dostosowywać się do rozdzielczości urządzenia. Przeanalizujmy przykład.
<div class="main"> <div id="left"> Sidebar </div> <div id="center"> <h1>Title</h1> <p>Lorem ipsum...</p> </div> </div>
.main{ width:80%; margin: 0 auto; } #left{ width:200px; float: left; } #center{ margin-left: 250px; }
I to by było na tyle ;). Jest to prosta w użyciu technika. Dla lewej kolumny wystarczy nadać atrybut float: left. Natomiast dla środkowej kolumny musimy ustawić lewy margines wynoszący co najmniej tyle co szerokość lewej kolumny. Jak to wygląda możecie zobaczyć na tej stronie. W przykładzie ze strony wykorzystano padding, ale w obu sposobach efekt jest taki sam.