Úvod > Programování > Ukázky kódů – HTML/CSS > Dvousloupcový layout – pevná šířkou sloupců
Dvousloupcový layout – pevná šířkou sloupců
Výsledek v prohlížeči »
CSS
/* ---------------------------------------------------------------------------------------------
DVOUSLOUPCOVY LAYOUT – PEVNA SIRKA SLOUPCU
---------------------------------------------------------------------------------------------*/
.wrapper {
width: 900px;
margin: 50px auto 0 auto;
padding: 0 15px;
}
.content {
text-align: left;
border: 1px solid silver;
}
.header {
padding: 10px 18px;
border-bottom: 1px solid silver;
}
.column1 {
float: right;
width: 75%;
}
.column2 {
float: left;
width: 24%;
text-align: center;
}
.column1-in, .column2-in {
margin: 10px 18px;
}
.cleaner {
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
}
.footer {
padding: 10px 18px;
border-top: 1px solid silver;
}
HTML
<div class="wrapper">
<div class="content">
<div class="header">
</div>
<div class="column1">
<div class="column1-in">
</div>
</div> <!-- konec prvniho sloupce -->
<div class="column2">
<div class="column2-in">
</div>
</div> <!-- konec druheho sloupce -->
<div class="cleaner"> </div> <!-- cistic, ukonci plovani sloupcu -->
<div class="footer">
</div>
</div> <!-- konec obsahu -->
</div> <!-- konec obalu -->