Как организовать приоритеты div?

Question

У меня есть 3 объекта:

<div class="container"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    <div class="center">Center</div>  
</div> 

Define обзор CSS следующие:

<style> 
    body{width: 100%;padding: 0; margin: 0;} 
    .container{width:960px; margin:30px auto;} 
    .left{width:25%; height:100px; background:#f60;;} 
    .right{width:25%; height:100px; background:#ff0;;} 
    .center{width:50%; height:100px; background:#f0f;;} 
</style> 

Требование в том, что я отсортировали div согласно следующей очередности:

1/левый - правый - Центр

.left{float:left;} 
.right{float:left;} 
.center{float:left;} 

2/левый - правый Center-

.left{float:left;} 
.right{float:right;} 
.center{float:left;} 

3/Center- правый - левый

.left{float:right;} 
.right{float:right;} 
.center{float:left;} 

4/Right - Центр - Левый

.left{float:right;} 
.right{float:left;} 
.center{float:right;} 

5/правый - левый - Центр? ??

6/Center-Left - Right ???

Обязательно (5) и (6) Я не могу этого сделать. Если я использую position:absolute может это сделать, но «контейнер» не будет автоматически изменять размер высоты при изменении ширины окна браузера (я использую адаптивную тему - разделяйте div на проценте)

Кто-нибудь есть решение CSS, ничего не меняя в HTML-код?

Answer 1

Попробуйте использовать position: absolute; с left в соответствии с шириной другого Div в нужном вам положении. И position: relative; в контейнер.