Содержимое нижнего колонтитула перекрывает оболочку div

У меня есть содержимое нижнего колонтитула, которое перекрывает div-оболочку в моих css и html, когда я изменил высоту на автоматическую, это не сработало. ниже приведен пример страницы, над которой я работаю.

CSS-оболочка

#wrapper {
width: 1030px;
height: 600px;
margin: 20px auto auto auto;
padding: 0;
background: url(wrapper.png);
}

CSS нижнего колонтитула

.footer{
width: 1000px;
padding: 60px 0 0 30px;
height: auto;
float: right;
clear: both;
background: url(footer_bg.gif) no-repeat top right;
text-align: center;

}

Пример


html css overlapping
person Dotunn Nnnn    schedule 17.11.2012    source источник
comment
Чем этот вопрос отличается от последнего заданного вами вопроса - stackoverflow.com/questions/13432241 /content-overlapping-div?   -  person j08691    schedule 17.11.2012
comment
Пожалуйста, сравните оба вопроса..   -  person Dotunn Nnnn    schedule 17.11.2012

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно очистить плавающие элементы в столбцах .content_left и content_right и удалить высоту, связанную с вашим #wrapper:

http://jsfiddle.net/L6acE/3/

Существует несколько различных методов очистки поплавков. Я пошел с очень простым методом, просто добавив <div style="clear:both;"> после обоих столбцов, как обсуждалось здесь:

http://css-tricks.com/the-how-and-why-of-clearing-floats/

Но я бы обычно использовал метод clearfix, обсуждаемый здесь:

http://nicolasgallagher.com/micro-clearfix-hack/

Я также добавил немного word-wrap:break-word CSS для вашего левого столбца, чтобы обернуть весь ваш фиктивный контент.

person Joel Eckroth    schedule 17.11.2012