float divs with clear & fill width

Question

У меня проблема, я хочу установить 3 плавающих divs, а внизу я хотел бы иметь нижний колонтитул. Поэтому я получил эти два решения, но это не сработает. Пожалуйста, проверьте изображение:

Здесь проблема в том, что содержимое не не очищено, поэтому футер не меняет позиции:

<div class="container"> 
    <div class="left"><div class="content"><div class="right"> 
    <div style="clear:left;"></div> 
</div> 
<div class="footer"></div> 


.container { 
    height: auto !important; 
    min-height: 100%; 
} 

.left { 
    float: left; 
    width: 20%; 
    max-width: 200px; 
} 
.center { 
    float: left; 
    width: 80%; 
    max-width: 500px; 
} 
.right { 
    width: auto; 
} 

.content { 
    height: auto !important; 
    height: 100%; 
    min-height: 100%; 
} 

.footer { 
    height: 202px; 
    margin: -202px auto 0; 
    position: relative; 
} 

Если я очистить содержимое, я получаю результат, что право ДИВ переходит к следующей строке:

спасибо!

Answer 1

Я немного поиграл. Я думаю, что ваша структура html не подходит для эффекта, который вы пытались создать.

Вот новый пример:

HTML

<div class="container"> 
    <div class="left"> 
    </div> 

    <div class="center"> 
    </div> 

    <div class="right"> 
    </div> 

    <div style="clear"> 

    <div class="content"> 
    </div> 

    <div class="footer"> 
    </div> 
</div> 

CSS

.container { 
    height: auto !important; 
    min-height: 100%; 
} 

.left { 
    float: left; 
    width: 20%; 
    max-width: 200px; 
    min-height: 100px; 
    background: red; 
} 
.center { 
    float: left; 
    width: 80%; 
    max-width: 500px; 
    min-height: 100px; 
    background: blue; 
} 
.right { 
    width: auto; 
    min-height: 100px; 
    background: green; 
} 

.content { 
height: auto !important; 
height: 100%; 
    min-height: 100px; 
    width: 80%; 
    max-width: 500px; 
    margin: 0 auto; 
    background: yellow; 
} 

.footer { 
    height: 202px; 
    margin: 0 auto; 
    position: relative; 
    background: purple; 
} 

Я rearanged все в этой скрипкой: http://jsfiddle.net/LJQCx/2/

Надеюсь, это то, что вы пытаетесь достичь.

Answer 2

Вот код надеюсь, что это поможет проверить fiddle

<div class="page-wrap"> 
<div class="container"> 
    <div class="left"> 
     <p>I am Left</p> 
    </div> 
    <div class="center"> 
     <p>I am Center</p> 
    </div> 
    <div class="right"> 
     <p>I am Right</p> 
    </div> 
    <div class="clear"></div> 
</div> 
</div> 
<div class="footer"> 
    <p>I am Footer</p> 
</div> 

* { margin: 0;} 
html, body { height: 100%;} 
.page-wrap {min-height: 100%;/* equal to footer height */margin-bottom: -142px; } 
.page-wrap:after { content: ""; display: block;} 
.footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px;} 
.site-footer {} 
.container{ width:100%;} 
.left{ float:left; width:25%;} 
.center{float:left; width:50%;} 
.right{float:left; width:25%;}