two float bar

by Alexander Zonov

HTML

<div class='twofloat_bar'>
    <div class="sub_bar left">        
        <div class="blue square"></div>
        <div class="blue square"></div>
    </div>
    <div class="sub_bar right">
        <div class="red square"></div>
        <div class="red square"></div>
        <div class="red square"></div>
    </div>
</div>

CSS

.twofloat_bar {
    position: relative;
    width: 100%;
    white-space: nowrap; 
}
.sub_bar {
    position: absolute;
    display: inline-block;
    top: 0;
}

.right { right: 0; text-align: rigth;}
.left { left: 0; text-align: left;}

.square {
    display: inline-block;  
    width: 100px; height: 100px;
}

.red {
    background-color: red;
}
.blue {
    background-color: blue;
}