Alignment in footer

Question

I'm trying to align items in my footer but I just can't seem to do it.

What I'm trying to do is add addresses up top i.e. home about etc

underneath that I'm trying to add privacy, legal etc with share buttons in the same line over to the right.

Below that I have a copyright, centered in the middle at the bottom.

I can get it almost there but not quite.

I'm trying to have the footer contain 3 rows. the top one contain site links like home, blog, etc the middle one to contain links like legal disclaimer etc but over in it's right corner I want the social icons and the last row to contain the copyright info.

Here's my fiddle

footer {
    margin-top: 200px;
    height:20%;
    width: 100%;
    background-color:#fff;
}
#connect, #links-add {
    display:inline-block;
    height:20%;
    vertical-align:top;
}
#links-add {
    width:20%;
}
#links-add p {
    margin-left:50px;
    color:#000000;
    text-align:left;
    display:inline-block;
    vertical-align:top;
    font-size:20px;
    font-family:'arial';
    margin-bottom:50px;
}
#connect.social-icons h3 {
    color:#000000;
    text-align:left;
    position:relative;
    display:inline-block;
    vertical-align:top;
    font-size:14px;
    font-family:'arial';
    margin-bottom: 20px;
}
#links-add .links-footer {
    clear: both;
    margin-left:50px;
    vertical-align:top;
    display:inline;
}
#links-add .links-footer li, .links-footer li a {
    display:inline-block;
    text-align:left;
    margin-top:20px;
    padding-right:40px;
    vertical-align:top;
    color: #000000;
    font-size: 14px;
}
.links-footer li a:hover {
    zoom: 1;
    filter: alpha(opacity=75);
    opacity: 0.7;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
}
#connect .social {
    max-width:15%;
    vertical-align:bottom;
    display:inline;
    white-space:nowrap;
    position:relative;
}
#connect .social li {
    display:inline-block;
    width:40px;
}
#connect .social li a {
    display:inline-block;
    margin-top:2px;
    width:34px;
    height:34px;
}
.copy-right {
    margin-top:20px;
    margin-left: 100px;
    margin-right: 100px;
    text-align:center;
    vertical-align: bottom;
}
.copy-right a {
    color: #000000;
    transition:0.3s all;
    -webkit-transition:0.3s all;
    -moz-transition:0.3s all;
    -o-transition:0.3s all;
}
.copy-right a:hover {
    color:#0000ff;
}
.social {
    display:inline;
    margin-bottom:0px;
}
.social li a.facebook {
    background:url('http://lorempixel.com/output/technics-q-c-72-72-7.jpg') no-repeat;
}
.social li a.twitter {
    background: url('http://lorempixel.com/output/technics-q-c-72-72-7.jpg') no-repeat;
}

<footer>
    <div id="links-add"> <a href="index.html">Home</a> 
    </div>
    <div id="links-add"> <a href="index.html">Home</a> 
    </div>
    <div id="links-add"> <a href="index.html">Home</a> 
    </div>
    <div id="links-add"> <a href="index.html">Home</a> 
    </div>
    <div id="links-footer">
        <li><a href="#">FAQ</a>
        </li>
    </div>
    <li><a href="#">FAQ</a>
    </li>
    </div>
    <li><a href="#">FAQ</a>
    </li>
    </div>
    <li><a href="#">FAQ</a>
    </li>
    </div>
    <div id="connect">
         <h3>Chat with us</h3> 
        <ul class="social">
            <li><a class="facebook" href="#"> </a>

            </li>
            <li><a class="twitter" href="#"><img src=""> </a>

            </li>
        </ul>
    </div>
    <p class="copy-right">Website by Thor<a href="#">copyright info</a> &nbsp; &copy 2015</a>
    </p>
</footer>

Answer 1

Arrangement as per your need. Red border is for highlighting.! CSS

footer{
margin-top: 200px;
width: 100%;
background-color:#ddd;
border:1px solid red;
}
.row-2{border:1px solid red}
.row-1 li{display:inline-block}
.legal{float:left;}
.social{float:right;}
.legal li, .social li{display:inline-block;border:1px solid red}
.smm{border:1px solid red;}
.copy-right{text-align:center}

HTML

<footer>
<ul class="row-1">
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Home</a></li> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="index.html">Home</a></li> 
</ul> 
<div class="row-2">
    <ul class="legal">
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">Terms and Conditions</a></li>
    <li><a href="#">legal</a></li>
</ul>

<div class="social">    
 <h3>Chat with us</h3>   
<ul class="smm">
    <li><a class="facebook" href="#"> <img src="http://lorempixel.com/output/technics-q-c-72-72-7.jpg" height="30"></a></li>
    <li><a class="twitter" href="#"><img src="http://lorempixel.com/output/technics-q-c-72-72-7.jpg" height=30> </a></li>
</ul>
</div>
<div style="clear:both"></div>
</div>


    <p class="copy-right">Website by Thor<a href="#">copyright info</a> &nbsp; &copy 2015</a></p>

</footer>

Check this Fiddle. Hope this help you.!!

Answer 2

If only the footer color is your problem then what your doing wrong is your code.

.footer{
    margin-top: 200px;
    height:20%;
    width: 100%;
    background-color:#000000;
}

what change you can do is

footer{
    margin-top: 200px;
    height:50px; //Give it a fixed height for now to check.
    width: 100%;
    background-color:#000;  
}

please let me know if its your solution and feel free to ask more if needed.

best regards.

Answer 3

Two things I've noticed right away.

The background-color isn't working because in the CSS you're targeting the .footer class. You need to target the footer tag (note the lack of a full stop preceding it).

You shouldn't use IDs more than once in a document (use classes instead).

As for the layout I couldn't quite understand what you're saying. Get back to me and I'll help you out further.