как заставить div нижнего колонтитула начать после того, как все остальные div закончены

Question

ОБНОВЛЕНИЕ : посмотрите демо здесь: http://amit -verma.com / template_test /

У меня небольшая проблема с выравниванием div нижнего колонтитула. У меня есть заголовок вверху.

div = maincontent
{
два div для контента, рядом.
еще 2 деления рядом друг с другом ниже содержимого.
}

// просто для представления. я знаю, что это не HTML;)

Теперь я хочу, чтобы div нижнего колонтитула начинался после того, как div основного содержимого завершился. я могу сделать это, если я укажу фиксированную высоту для maincontent div. но я не хочу указывать высоту для него. если я не указываю высоту, div нижнего колонтитула начинается в середине страницы.

что я делаю не так?

код

боковая панель {

margin-top: 10px;
width: 300px;
float: right;
text-align: justify;
font-size: 14px;
line-height: 18px;
color: #FFF;

}

maincontent {

margin-top: 10px;
width: 620px;
height: 590px;
text-align: justify;
font-size: 14px;
line-height: 18px;

}

maincontent .rect {

width: 580px;
background-color: #dbdddf;
margin-right: 10px;
padding: 15px;

}

maincontent .square {

width: 270px;
float: left;
min-height: 270px;
margin-top: 10px;
margin-right: 10px;
background-color: #c6c7c7;
padding: 15px;

}

нижний колонтитул {

background-color: #b1977f;
width: 880px;
font-size: 14px;
padding: 20px;
text-align: left;
color: #FFF;

} * * тысяча пятьдесят-один

HTML

   <div id="sidebar">
    <div class="box">
        </div>
    <div class="box">
        </div>
    </div>

<div id="maincontent">
    <div class="rect">
        </div>
    <div class="square">
        </div>
    <div class="square">

        </div>
    </div>

<div id="footer">
    </div>

Answer 1

Попробуйте

clear:both;

на содержание и

float:left;

в нижнем колонтитуле

EDIT:

#footer {
background-color: #b1977f; 
width: 880px; 
font-size: 14px; 
padding: 20px; 
text-align: left; 
color: #FFF; 
float:left;
}

он имеет # на CSS правильно?

Answer 2

Вы можете «убрать» эффект float для одного элемента и его дочерних элементов, используя clear. Он имеет 3 значения: clear: left; для левых, clear: right; for right floats and clear: both; для обоих, очевидно.

Answer 3

Есть ли шанс, что вы сможете разместить это, чтобы мы могли увидеть проблемы? Попробуйте переместить нижний колонтитул влево и вставьте в него оба текста.