Проблемы с расположением нижнего колонтитула

Question

Я пытаюсь понять, почему этот нижний колонтитул действует необычно. Если вы заметили в демонстрации, то метка HR в разделе местоположения будет нажата в нижней части страницы. Что меняет макет. Также я пытаюсь получить значок Facebook для плавания: слева, чтобы он находился слева от тега HR в разделе «Сеть с нами». Мой CSS отлично подходит для меня, но это первый раз, когда я использовал теги раздела для html5.

Также у меня возникли проблемы с использованием фонового цвета или верхнего края: 50 пикселей на мой # footer.It, как будто #footer игнорирует меня.

Вот мой Demo

#footer { 
    background-color:#95643d; 
    width:100%; 
    margin:30px 0px 0px 0px; 
    clear:both; 
} 
#footer h3 { 
    font-family: 'Dancing Script', cursive; 
    font-weight:700; 
    color:#FFF; 
    font-size:2em; 
} 
#footer hr { 
    width:60%; 
    float:left; 
    height:4px; 
    background-color:#FFF; 
} 
#footer p { 
    margin:0px; 
    padding: 0px; 
    color:#FFF; 
    font-family: 'Arimo', sans-serif; 
} 
#footer_logo { 
    width:25%; 
    float:left; 
    background-color:#95643d; 
} 
#footer_logo img { 
    margin:20px 0px 0px 20px; 
} 
#footer_network { 
    width:25%; 
    float:left; 
    background-color:#95643d; 
} 
#footer_contact { 
    width:25%; 
    float:left; 
    background-color:#95643d; 
} 
#footer_network img { 
    float:left; 
} 
} 
#footer_location { 
    width:25%; 
    float:left; 
    background-color:#95643d; 
} 

Answer 1

Также у меня возникают проблемы с использованием фона или края: 50px для моего # footer.It, как будто #footer игнорирует меня.

Когда у вас есть поплавки, родительский элемент обрушивается, поэтому вы должны clear the floats. Одним из часто используемых методов является класс clearfix. Применительно к вашему элементу он будет выглядеть следующим образом:

#footer:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

У меня есть скрипка с чистым кодом, который вы можете использовать его части, или все это, в удобное время. https://jsfiddle.net/r3ruzLL2/2

https://jsfiddle.net/r3ruzLL2/2/embedded/result/

EDIT: Для логотипа Facebook, простое решение заключается в использовании отрицательного margin-top.

Answer 2

Здесь вы идете, это, кажется, исправить ошибку: http://jsfiddle.net/weissman258/kpo4y108/10/.

Вот что я добавил.

#footer { 
    display:inline-block; 
} 

#footer_network { 
    position:relative; 
} 
#footer_network a { 
    position:absolute; 
    left:0; 
} 
#footer_location { 
    display:inline-block; 
} 

Как и удаления:

#footer_network img { 
    float:left; 
} 

Edit: Ваша первая линия на месте, казалось, выровнен правильно, так сделано еще одно изменение, чтобы исправить это:

#footer p { 
clear:left; 
} 

Answer 3

Добавить это правило :

section{ 
    overflow:hidden; 
} 

Answer 4

Вы можете использовать этот CSS:

/* Footer */ 

#footer { 
    background-color:#95643d; 
    width:100%; 
} 
#footer h3 { 
    font-family: 'Dancing Script', cursive; 
    font-weight:700; 
    color:#FFF; 
    font-size:2em; 
    text-align: center; 
} 
#footer hr { 
    width:100%; 
    float:left; 
    height:4px; 
    background-color:#FFF; 
} 
#footer p { 
    margin:0px; 
    padding: 0px; 
    color:#FFF; 
    font-family: 'Arimo', sans-serif; 
    text-align: center; 
    margin-bottom: 10px; 
} 
#footer_logo { 
    width:100%; 
    float:left; 
    background-color:#95643d; 
} 
#footer_logo img { 
    margin: 10px auto; 
    display: block; 
} 
#footer_network { 
    float:left; 
    background-color:#95643d; 
    width: 33%; 
} 
#footer_contact { 
    width: 33%; 
    float:left; 
    background-color:#95643d; 
} 
#footer_network img { 
    margin: 0 auto; 
    display: block; 
} 
#footer_location { 
    display: inline-block; 
    background-color:#95643d; 
    width: 34%; 
} 

Answer 5

Вот скрипку для вас https://jsfiddle.net/kpo4y108/6/. У вас есть перерыв в вашем html, который вам не нужен. У вас есть фон в разных div, который вам не нужен, если у вас только один цвет. Дайте знать, если у вас появятся вопросы.

<div id="footer"> 
    <section id="footer_logo"> 
     <img src="http://nuskinprinting.com/atticstash/images/as_logo.png" /> 
    </section> 
    <section id="footer_network"> 
     <a><img src="http://nuskinprinting.com/atticstash/images/facebook_icon.png" /></a> 
     <h3>Network With Us</h3> 
     <hr /> 
    </section> 
    <section id="footer_contact"> 
     <h3>Contact Us</h3> 
     <hr /> 
     <p> Vivian@advancedlitho.com<br />(972)999-9999 </p> 
    </section> 
    <section id="footer_location"> 
     <h3>Location</h3> 
     <hr /> 
     <p> Orange Circle Antique Mall<br />118 South Glassell Street<br />Orange, CA 92866<br />(714)538-8160<br />Mon. 10 a.m. - 4:45 p.m.<br />Tues - Sat 10 a.m. - 5:45 p.m.<br />Sun. 11 a.m. - 5:45 p.m. </p> 
    </section> 
</div> 

CSS:

/* Footer */ 

#footer { 
    background-color:black; 
    width:100%; 
    margin:30px 0px 0px 0px; 
    clear:both; 
    float:left; 

} 
#footer h3 { 
    font-family: 'Dancing Script', cursive; 
    font-weight:700; 
    color:#FFF; 
    font-size:1.5em; 
    margin:0px; 
    padding:0px; 
} 

#footer hr { 
    width:60%; 
    float:left; 
    height:4px; 
} 
#footer p { 
    margin:0px; 
    padding: 0px; 
    color:#FFF; 
    font-family: 'Arimo', sans-serif; 
    float:left; 
    word-wrap:break-word; 
} 
#footer_logo { 
    width:25%; 
    float:left; 
} 
#footer_logo img { 
    margin:20px 0px 0px 20px; 
    max-width:80%; 
} 
#footer_network { 
    width:25%; 
    float:left; 
} 
#footer_contact { 
    width:25%; 
    float:left; 
} 
#footer_network img { 
    float:left; 
    width:25px; 
    height:25px; 
    margin: 5px 5px 0 0; 
} 

#footer_location { 
    width:25%; 
    float:left; 
}