Другая липкая проблема с нижним колонтитулом. 100% ширина div с повторением bg и div, помещенными вправо

Question

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

Проблема:

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

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

Проблема в том, что я нуждаюсь в другой 100% -ной ширине div (# 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

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

Update:

здесь проблемы I найдено:

• Вы не установили правильную конфигурацию для липкого нижнего колонтитула в соответствии со спецификацией. padding-bottom of #main не был так же, как высота нижнего колонтитула;
• Вы использовали float, когда вы могли просто использовать текстовое выравнивание для вас #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; 
} 

удачи.