Floats & Clear HTML example

by Ian Roberts

HTML

<div class="wrapper">
    <div><p>content</p></div>
    <div class="floatRight"></div>
    <div class="floatLeft"></div>
        <div class="clear"></div>
</div>

CSS

.wrapper {
    padding:10px;
    background:#eaeaea;
    border:1px solid #ccc;
}
.floatRight, .floatLeft {
    height:100px;
}
.floatRight {
    width:20%;
    background: red;
    float:right;
}
.floatLeft {
    width:80%;
    background: blue;
    float:left;
}
.clear {
    clear:both;
}