1 Vote Vote

Footer makes space after button

Posted by topdog 23 days ago Questions| div class href All
I've got this little problem which i don't really understand.

So the problem is on the footer i want to have 5 buttons, but they r droping

Here's the page in the web: http://milka.net76.net/

Here's the html:

CODE
<body>

<div class="wrap">

<div id="header">

<div class="soc_btns">
<a href="#" class="email" alt="contact me via e-mail">e-mail me</a>
<a href="https://www.facebook.com/milka1" class="fcb" alt="find me on facebook">facebook</a>
<a href="#" class="skype" alt="contact me via Skype">Skype me</a>
</div>

<div class="head_btns">
<a href="#" class="btn1">Services</a>
<a href="#" class="btn2">About Me</a>
<a href="#" class="btn3">Portfolio</a>
<a href="#" class="btn4">Contact</a>
</div>

</div> <!--END of header-->

<div id="content">
<div>

</div>
</div>

</div> <!--END of wrap-->
<div id="footer">
<div class="wrap">
<div class="contact">
<a class="email">my email:    giveup13@gmail.com</a>
</br>
<a class="phone">my phone:    00370 621 26655</a>
<a href="#" class="touch">get in touch</a>
<a href="#" class="lt">lt</a>
<a href="#" class="uk">uk</a>
<a href="#" class="ru">ru</a>
<a href="#" class="pt">pt</a>
<a class="copyright">Copyright © 2011 milka freelance design. All rights reserved.</a>
</div>
</div>
</div>
</body>


Here's the CSS

CODE
html, body {
height: 100%;
font-family: Verdana, sens-serif;
font-size: 12px;
background-image: url(images/header_bg.png), url(images/content_bg.png), url(images/footer_bg.png);
background-position: top center, top center, bottom center;
background-repeat: repeat-x, repeat-y, repeat-x;
color: #ffffff;
}


.wrap {width: 880px; margin: 0 auto; min-height: 100%;}

#header{ width:100%; height:249px; position:relative; background:url('images/header.jpg') 0 0 no-repeat;}
.head_btns{ width:100%; overflow:hidden;}
.head_btns a{page-break-after:always; float:left; display:inline; height:60px; margin-top:188px; overflow:hidden; text-align: center; line-height:62px; font-weight:bold;}
.head_btns a.btn1{ width:150px; margin-left:135px;}
.head_btns a.btn2{ width:150px; margin-left:1px;}
.head_btns a.btn3{ width:150px; margin-left:1px;}
.head_btns a.btn4{ width:150px; margin-left:1px;}
.head_btns a:hover, a:active {color: #5b6ec6;}

.soc_btns a{position: absolute; text-indent: -9999px; float:left; display:inline; overflow:hidden; text-align: center;}
.soc_btns a.email{width:73px; margin-left: 568px; margin-top:60px; height:63px;}
.soc_btns a.fcb{width:50px; margin-left: 643px; margin-top:38px;height:50px;}
.soc_btns a.skype{width:46px; margin-left: 643px; margin-top: 88px; height: 40px;}

#content{ width:880px; margin:0 auto; background: url(images/shadow.png) 0 0 no-repeat; overflow:auto; padding-bottom:93px;}

#footer{position:relative; margin-top:-93px; width:100%; height:93px; background:url('images/footer.png') bottom no-repeat;}
.contact {overflow: hidden; width: 880px; margin: 0 auto;}
.contact a{page-break-after:auto; float:left; height:57px; margin-top:14px; overflow:hidden; text-align: center; font-family: Georgia, sens-serif;}
.contact a.email {margin-left: 100px; font-size: 12px; color: white; font-weight: bold;}
.contact a.phone {margin-left: -218px;font-size: 12px; color: white; font-weight: bold; line-height:20px;}
.contact a.copyright {margin-top: 14px;margin-left:-80px; font-family: Verdana, sens-serif;}
.contact a.touch{width:74px; margin-left: 138px; margin-top:-3px; height:44px; text-indent:-9999px;}
.contact a.lt{width:68px; margin-left: 12px; height:58px; margin-top:-10px; text-indent:-9999px;}
.contact a.uk{width:60px; margin-left: 2px; height:58px; margin-top:-10px; text-indent:-9999px;}
.contact a.ru{width:60px; margin-left: 2px; height:58px; margin-top:-10px; text-indent:-9999px;}
.contact a.pt{width:60px; margin-left: 2px; height:58px; margin-top:-10px; text-indent:-9999px;}
Discuss Bury


Who Voted for this Question