Footer Layout Issues - css

Question

I'm trying to figure out why this footer is acting unusual. If you notice in the demo the HR tag in the location section is being pushed to the bottom of the page. Which is changing the layout. Also i'm trying to get the Facebook Icon to float:left so that it will be to the left of the HR tag within the "Network With Us section." My CSS looks fine to me, but this is the first time i've used the section tags for html5.
Also i'm having troubles applying a background-color or a margin-top:50px to my #footer.It's as if the #footer is ignoring me.
Here is my 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

You can use this 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 2

Also i'm having troubles applying a background-color or a margin-top:50px to my #footer.It's as if the #footer is ignoring me.
When you have floats, the parent element collapses, so you have to clear the floats. One often-used technique is the clearfix class. Applied to your element it would look like this:
#footer:after {
content: "";
display: table;
clear: both;
}
I have a fiddle with cleaner code that you can use parts of it, or the whole thing, at your convenience. https://jsfiddle.net/r3ruzLL2/2
https://jsfiddle.net/r3ruzLL2/2/embedded/result/
EDIT: For the Facebook logo, an easy solution is to use a negative margin-top.

Answer 3

Add this rule:
section{
overflow:hidden;
}

Answer 4

Here you go, this seems to be fixing your problem: http://jsfiddle.net/weissman258/kpo4y108/10/.
Here are the things I added.
#footer {
display:inline-block;
}
#footer_network {
position:relative;
}
#footer_network a {
position:absolute;
left:0;
}
#footer_location {
display:inline-block;
}
As well as removing:
#footer_network img {
float:left;
}
Edit: Your first line on location seemed to be aligned right, so made another change to fix it:
#footer p {
clear:left;
}

Answer 5

Here is a fiddle for you https://jsfiddle.net/kpo4y108/6/ . You have break's in your html that you don't need. You have background's in different div's, which you don't need if you are only going to have one color. Let me know if you have any questions.
<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 />[phone] </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 />[phone]<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;
}