PODRECZNIK
  1. Strona Główna
  2. HTML5
  3. CSS3
  4. O projekcie

Układy o stałym rozmiarze

Układ z jedną kolumną
<div id="poj">
 <header>Header</header>
 <div id="srodek"></div>
 <footer>Stopka</footer>
</div>
#poj{
width:300px;
margin:0 auto;
}
header,footer{
height:20px;
background-color:black;
}
#srodek{
height:100px;
background-color:grey;
}
#poj - ustawiamy szerokość na 960 i marginesy tak aby był automatycznie środkowany
#srodek - jedyna kolumna w tym układzie, ustawiamy jakąś wysokość
header i footer - nagłówek i stopka

Efekt

Header
Stopka
Układ z dwoma kolumnami
<div id="poj">
 <header>Header</header>
 <div id="lewa"></div>
 <div id="prawa"></div>
 <footer>Stopka</footer>
</div>
#poj{
width:300px;
margin:0 auto;
}
header,footer{
height:20px;
background-color:black;
clear:both;
}
#lewa{
height:100px;
width:100px;
background-color:red;
float:left;
}
#prawa{
height:100px;
width:200px;
background-color:yellow;
float:left;
}

Efekt

Header
Stopka
Układ z trzema kolumnami
<div id="poj">
 <header>Header</header>
 <div id="lewa"></div>
 <div id="srodek"></div>
 <div id="prawa"></div>
 <footer>Stopka</footer>
</div>
#poj{
width:300px;
margin:0 auto;
}
header,footer{
height:20px;
background-color:black;
clear:both;
}
#lewa{
height:100px;
width:100px;
background-color:red;
float:left;
}
#srodek{
height:100px;
width:100px;
background-color:blue;
float:left;
}
#prawa{
height:100px;
width:100px;
background-color:yellow;
float:left;
}

Efekt

Header
Stopka

Układy płynne

Zasada jest podobna do stałych z tą różnicą, że wartości wyrażamy procentami. Takie układy cechują się lepszą responsywnością
<div id="poj">
 <header>Header</header>
 <div id="lewa"></div>
 <div id="prawa"></div>
 <footer>Stopka</footer>
</div>
#poj{
width:100%;
margin:0 auto;
}
header,footer{
height:20px;
background-color:black;
clear:both;
}
#lewa{
height:100px;
width:20%;
background-color:red;
float:left;
}
#prawa{
height:100px;
width:80%;
background-color:yellow;
float:left;
}

Efekt

Header
Stopka

Układ hybrydowy

Układ hybrydowy - układ, w którym ustawiamy szerokość dla elementów statycznych, a dla płynnych, margines równy szerokości elementów statycznych. Pozycjonowaniem ustawiamy elementy statyczne w tym marginesie
<div id="poj">
 <header>Header</header>
 <div id="lewa"></div>
 <div id="prawa"></div>
 <footer>Stopka</footer>
</div>
#poj{
width:80%;
margin:0 auto;
position:relative;
}
header,footer{
height:200px;
background-color:black;
clear:both;
}
#lewa{
height:100px;
width:100px;
background-color:red;
position:absolute;
left:0px;
top:200px;
}
#prawa{
height:100px;
margin-left:100px;
background-color:yellow;
overflow:hidden;
}
Przykład układu hybrydowego