Демонстрация макета с содержимым float

by webref

HTML

<header> 
    <code>&#60;header&#62;</code>
</header>
<div class="group"> 
    <code class="default">&#60;section="group"&#62;</code>

    <section> <code>&#60;section&#62; <br> float: left;</code>

    </section>
    <aside> <code>&#60;aside&#62; <br> float: right;</code>

    </aside>
</div>
<footer> 
    <code>&#60;footer&#62; <br> clear: both;</code>
</footer>

CSS

code {
    background: #2db34a;
    border-radius: 6px;
    color: #fff;
    display: block;
    font: 14px/24px"Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
    padding: 24px 15px;
    text-align: center;
}
.default {
    background: none;
    color: #666;
}
.group:before, .group:after {
    content:"";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    background: #eaeaed;
    border-radius: 6px;
    clear: both;
    *zoom: 1;
}
.group, header, section, aside, footer {
    margin: 0 1.5% 24px 1.5%;
}
section {
    float: left;
    width: 63%;
}
aside {
    float: right;
    width: 30%;
}
footer {
    margin-bottom: 0;
}