У меня проблема, я хочу установить 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;
}
Если я очистил контент, я получаю результат, что правый div переходит к следующей строке:
благодарю!
Я немного поиграл. Я думаю, что ваша структура 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;
}
Я переделал все в этой скрипке: http://jsfiddle.net/LJQCx/2/
Надеюсь, это то, что вы пытаетесь достичь.
Вот код, который поможет проверить скрипку
<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%;}