float bar

by Alexander Zonov

HTML

<div class='float_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 class="sub_bar center">
        <div class="shuttle">
            <div class="green square"></div>
            <div class="green square"></div>
            <div class="green square"></div>
        </div>       
    </div>
</div>

CSS

.float_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;}
.center { left: 50%; }
.center .shuttle {
    margin-left: -50%;
}

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

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