Ahoj...
je to podle knizky css hotova reseni...
A ja se ptam, jak autor prisel na hodnotu 24.7% u .article??
kod je nasledujici:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Skupina shodných sloupců</title>
<style type="text/css" media="all">
body {
background-color: #CCCCCC;
text-align: center;
}
#page {
margin: 0 15%;
padding: 0.5em 1.5em;
background-color: white;
text-align: left;
}
#master {
width: 100%;
background-color: #E0E0E0;
}
.article {
width: 24.7%;
float: left;
}
.articlein {
padding: 0.5em;
}
.article h3 {
margin: 0.25em 0;
font-size: 100%;
}
.article p {
margin: 0;
}
.cleaner {
clear: both;
height: 0;
overflow: hidden;
content: ' ';
}
.cleaner hr {
display: none;
}
</style>
</head>
<body>
<h1>Skupina shodných sloupců</h1>
<div id="page">
<p>Toto je příklad většího množství (v našem případě čtyř) sloupců stejné šířky. Vhodný je například pro několik upoutávek na různé články. Každý box je plovoucí a má deklarovanou šířku. Součet šířek všech boxů nesmí být větší, než šířka rodičovského boxu. I pouhé přetečení o jeden pixel způsobí "odskočení" posledního sloupce pod své předchůdce.</p>
<div id="master">
<div class="article">
<div class="articlein">
<h3><a href="#">Lorem ipsum</a></h3>
<p>Lorem ipsum dolor sit amet consectetuer diam justo metus id congue.</p>
</div>
</div>
<div class="article">
<div class="articlein">
<h3><a href="#">Faucibus pellentesque</a></h3>
<p>Faucibus pellentesque eros hac Phasellus elit Vestibulum lacinia urna justo ut. </p>
</div>
</div>
<div class="article">
<div class="articlein">
<h3><a href="#">Sed sem netus</a></h3>
<p>Sed sem netus congue et at a pede consectetuer tincidunt Morbi. </p>
</div>
</div>
<div class="article">
<div class="articlein">
<h3><a href="#">Tellus pede</a></h3>
<p>Tellus pede nascetur ligula In convallis Maecenas lorem ut sed metus. </p>
</div>
</div>
<div class="cleaner">
<hr />
</div>
</div>
</div>
</body>
</html>
