why div in center - css

Question

I know its the noobest question you had every seen but but really guys I am not able to find whats wrong in my css. I am trying to float two divs inside a footer div. But the problem is that the first div (#copyrights) is just stuck in the middle. It looks like there's something wrong with the main container (#footer). Because when I place the last container outside it then everything works great
Have a look at my code on jsfiddle.
Heres my HTML (The footer div is at the bottom):
<div id="footer">
<!-- Upper footer -->
<div id="upper-footer">
<!--Footer Navigation Links -->
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
The Mall
</li>
<li>
Media Center
</li>
<li>
Contact Us
</li>
</ul>
<!-- End od Footer nav links -->
<!--Start of newsletter div -->
<div id="newsletter">
<span>SignUp To Get The Latest News & Updates</span>
<form>
<input class="rounded" type="text" value="Your Email Here..." >
<input class="rounded-button" value="SUBSCRIBE" type="button" >
</form>
</div>
<!--End of Newsletter div-->
</div>
<!-- End of upper footer -->
<!-- Start of lower footer -->
<div id="lower-footer">
<div id="copyrights">
2013 Boulevar Mall. All rights reserved.
</div>
<div id="social">Follow us </div>
</div>
<!--End of lower footer -->
And here's my css:
#import url(http://fonts.googleapis.com/css?family=Droid+Sans);
#footer
{
height:100px;
font-family: 'Droid Sans', sans-serif;
text-transform:capitalize;
font-size:14px;
}
/*css for upper footer */
#upper-footer
{
height:70%;
background-color:#efe7e1;
}
#upper-footer #newsletter
{
float:right;
height: 100%;
display: table;
}
#upper-footer ul
{
list-style:none;
margin-top: 0px;
float:left;
width:480px;
}
#upper-footer ul li
{
display:inline-block;
height: 100%;
border-left: 1px solid d7cfca;
}
#upper-footer ul li:nth-child(1)
{
border-left:none;
}
#upper-footer ul li a
{
line-height:200%;
text-decoration:none;
color:#9b907c;
display:block;
line-height:70px;
padding-left:15px;
padding-right:15px;
width: 100%;
}
#upper-footer #newsletter span
{
color:#726753;
width:150px;
display: table-cell;
vertical-align: middle;
}
#upper-footer #newsletter form
{
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
/*for rounded text box */
input.rounded
{
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 9.42px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
height:26px;
width:163px;
text-align:center;
}
/*for rounded button */
input.rounded-button
{
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-size: 9.42px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
height:29px;
width:80px;
background-color:#726753;
color: white;
font-weight: bold;
}
input.rounded-button:hover
{
background-color:white;
border:#726753 solid 1px;
color:#726753
}
/*css for lower footer */
#lower-footer
{
background-color:#726753;
height:30%;
color:white;
}
#lower-footer #copyrights
{
float:left;
}
#lower-footer #social
{
float:right;
}
Your're free to point out my mistakes as I am very new to this stuff :)
Thanks in advance!

Answer 1

It is the margin on #upper-footer ul that's not letting your #copyrights float to the extreme left. Try replacing #upper-footer ul rule with following
#upper-footer ul
{
list-style:none;
margin: 0;
float:left;
width:480px;
}
it sets all margins for #upper-footer ul to zero instead of only margin-top.
Update
As the margin of the #upper-footer ul element is overflowing out of its parent, #upper-footer, setting overflow: hidden for #upper-footer will also do the trick.