czerwca 24
Techniki budowy layoutów wielokolumnowych część 2 - One True Layout
Technika zwana One True Layout, rozwiązująca problem przedstawiony prze ze mnie we wstępie do cyklu, została zaprezentowana na witrynie Position Is Everything i jest niezwykle często używana ze względu na swą prostotę i uniwersalność. Zyskała również wiele modyfikacji, między innymi na łamach serwisu A List Apart.
Metoda ta pozwala na zarówno ustalenie stałych, jak i procentowych szerokości kolumn. Tym razem skorzystamy z tej drugiej możliwości (pełny kod do ujrzenia w przykładzie). Znów mamy 3 kolumny, jednak tym razem zarówno cała strona jak i bloki mają szerokość ustaloną proporcjonalnie do ekranu.
<div id="all"> <div id="header">Logo</div> <div id="left">Lewy blok</div> <div id="center">Środkowy blok<br /><br /><br /></div> <div id="right">Prawy blok</div> <div id="footer">Stopka</div> </div>
#header{
height: 70px;
}
#left{
width: 20%;
float: left;
background-color: #c8c8c8;
}
#center{
width: 65%;
float: left;
background-color: #FAFAFA;
}
#right{
width: 15%;
float: right;
background-color: #c6c6c6;
}
#footer{
height: 70px;
clear: both;
}
Jak się to robi?
Aby nadać kolumnom jednakową wysokość (a raczej jej iluzję) zrobimy rzecz niezwykle prostą. Obejmujemy kolumny kontenerem, i nadajemy mu styl overflow:hidden. Kolumnom natomiast dodamy ogromny padding-bottom (tak duży, żeby blok nigdy w życiu nie mógł osiągnąć tej wysokości) oraz przeciwny margin-bottom.
<div id="container"> <div id="left">Lewy blok</div> <div id="center">Środkowy blok<br /><br /><br />jest zwykle dłuższy</div> <div id="right">Prawy blok</div> </div>
#container{
overflow: hidden;
}
#left, #center, #right{
padding-bottom: 10000px;
margin-bottom: -10000px;
}
Jeżeli chcemy nadać kolumnom dodatkowy, widoczny dolny margines wewnętrzny to po prostu zwiększmy go o wybraną wartość względem marginesu, np. dodajmy 10-cio pikselowy padding dolny:
#left, #center, #right{
padding-bottom: 10010px;
margin-bottom: -10000px;
}
Rezultat jest taki, jak oczekiwaliśmy – wysokości wszystkich kolumn pokrywają się i ich tło wygląda ładnie.
Podsumowanie
Na tej metodzie moglibyśmy w zasadzie zakończyć poszukiwania idealnej techniki tworzenia layoutów wielokolumnowych. Jest ona niezwykle prosta, nie wymaga tworzenia dodatkowych plików graficznych czy zbyt wielu działań w HTML/CSS. Gdy będziemy jednak chcieli ją przystosować do rzadiej spotykanych przeglądarek (IE 5 for Mac, Opera 7,8, stare Safari) niezbędne będą hacki. Wciąż poszukiwane są nowe sposoby, również przydatne, chociażby ze względu na to, że wpływają na rozwój wyobraźni, kreatywności czy zaspokajanie własnych ambicji. Warto je poznać, dlatego jeszcze kilka na łamach mojego bloga zaprezentuję 
Podobne wpisy
Licencja:
