Еще одна проблема с липким нижним колонтитулом.Div ширины 100% с повторением bg и div плавает вправо

Question

Я знаю, что этот вопрос старый, но я исследовал, попробовал и попробовал в течение 2 дней, но мне все еще не повезло, и я надеюсь, что кто-то здесь может дать мне какой-нибудь совет!

Проблема:

У меня есть страница, на которой мне нужно применить липкий нижний колонтитул, просто, как обычно, но здесь у меня проблема.

Я могу заставить div нижнего колонтитула (#footer) придерживаться дна без проблем (это 100% ширина с повторяющимся фоновым изображением). Затем в этом DIV я плаваю другой (#cut) с bg-изображением, чтобы право (ножницы в моем примере). Это тоже отлично работает.

Проблема в том, что мне нужен еще один div шириной 100% (# footer-link-wrap) ниже основного, чтобы я мог перемещать некоторые навигационные ссылки (#links) в центре. В # footer-link-wrap мне нужно, чтобы другое изображение всплыло полностью вправо, попытался сделать это с позиционированным фоном, но я не могу заставить его работать.

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

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

* {
margin:0;padding:0;
} 


html, body {

 height: 100%;
 background-color:#000;
 }

#wrap {
 min-height: 100%;
 }

#main {
 overflow:auto;
 padding-bottom: 60px;
 }  

#footer {
 position: relative;
 margin-top:-20px; 
 height: 20px;
 clear:both;
 width:100%;
 background:url(foot-hair.png) repeat-x;
 background-position:0 8px;
}

#cut{
 float:right;
 width:40px;
 height:20px;
 background: url(haircut.png);
}

#footer-link-wrap{

 margin-top:-40px; 
 height:40px;
 width:100%;
 background:url(hair-fall.png) no-repeat;
 background-position:bottom right;

 }

#links{
 position:relative;
 margin-left:auto;
 margin-right:auto;
 width:800px;
 background-color:#fff;
 }

/*for opera
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}*/`

Вот ссылка на пример float help

Answer 1

Попробуйте эту реализацию: http://www.cssstickyfooter.com/

Обновление:

вот проблемы, которые я нашел:

• вы не правильно установили базовый конфигурация для липкого нижнего колонтитула согласно спецификации. padding-bottom #main не был такой же, как высота нижнего колонтитула;
• Вы использовали float, когда могли просто использовать text-align для вас #links # footer-link-wrap divs.
• Некоторые другие мелочи, которые я не могу вспомнить, попробуйте вместо этого использовать этот лист CSS.

/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 60px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -60px; /* negative value of footer height */
    height: 60px;
    clear:both;}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}




/**********************************
*** Start of your modifications ***
***********************************/
html, body {
background-color:#000;
}

#footer {
background:url(http://www.d-syne.com/float/foot-hair.png) repeat-x;
}

#cut{
width:100%;
height:20px;
background: url(http://www.d-syne.com/float/haircut.png) no-repeat bottom right;
}

#footer-link-wrap{
height:40px;
width:100%;
text-align: center;
background:url(http://www.d-syne.com/float/hair-fall.png) no-repeat bottom right;
 }

#links{
text-align: left;
margin: 0 auto;
width:800px;
background-color:#fff;
color: black;
}

удачи.