Working with floated-layout

This fiddle aim at understanding the different ways floated-layout can be used.

by Rupam Datta

HTML

<div class="ex-1 wrapper">
    <div class="sidebar">Sidebar</div>
    <div class="content">
        <div class="column-left">Left Column</div>
        <div class="column-right">Right Column</div>  
        <div class="clear"></div>
    </div>
</div>


<div class="divider"></div>

<div class="ex-2 wrapper">
    <div class="sidebar">Sidebar</div>
    <div class="content clearfix">
        <div class="column-left">Left Column</div>
        <div class="column-right">Right Column</div>        
    </div>
</div>




<div class="divider"></div>


<div class="ex-3 wrapper">
    <div class="sidebar">Sidebar</div>
    <div class="content">
        <div class="column-left">Left Column</div>
        <div class="column-right">Right Column</div>
    </div>
</div>

CSS

.divider {
    margin: 30px 0;
    border-top: 10px solid #f9b25e;
    border-right: 10px solid #45ca5f;
    border-bottom: 10px solid #448bcc;
    border-left: 10px solid #dd4444;
}
.wrapper {
    width: 300px;
}
.sidebar {
    float: left;
    width: 100px;
    height: 300px;
    background-color:#f9b25e;
}
.content {
    margin-left: 100px;
    background-color:#45ca5f;
}
.column-left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #448bcc;
}
.column-right {
    float: left;
    width: 100px;
    height: 200px;
    background-color: #dd4444;
}


/* Example 1*/
.clearfix:after{
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

/* Example 2*/
.clear { clear: both; }


/* Example 3*/
.ex-3 .content{
    overflow: hidden;
}