3 sloupcový layout pomocí CSS

Zajímavý článek jak lze pomocí CSS řešit layouty – základní rozvržení webu.

http://zdrojak.root.cz/clanky/soucasnost-a-budoucnost-layoutu-css-tabulky/

Zajímavá metoda Faux absolute position kde lze docílit stejně vysoké sloupce.

CSS:

<style>
.obal {
	position: relative;
	width: 80%;
	margin: 0 auto;
	overflow: hidden
}
.sloupec1, .sloupec2, .sloupec3 {
	float: left;
	left: 100%;
	position: relative;
	height: 100px;
	overflow: hidden
}
.sloupec3 {
	width: 20%;
	margin-left: -20%;
	background: blue
}
.sloupec1 {
	width: 20%;
	margin-left: -100%;
	background: green
}
.sloupec2 {
	width: 60%;
	margin-left: -80%;
	background: yellow
}
</style>

HTML:

<div class="obal">
	<div class="sloupec3">
		Třetí sloupec na obrazovce, ale první v kódu
	</div>
	<div class="sloupec1">
		První sloupec na obrazovce, ale druhý v kódu
	</div>
	<div class="sloupec2">
		Druhý sloupec na obrazovce, ale třetí v kódu
	</div>
</div>

Jak to celé funguje je on-line ukázka zde .