Images are stacking on each other instead of next to each other

HTML & CSS
1

I am placing some links to social networks in my footer w/ little image buttons. I have around 5 to do. THey are over lapping (the images) so i can only see the last one. I have tried several things in my style sheet and still can’t figure out why. Any ideas? thanks.

HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“html://www.w3.org/TR/xhtm1/DTD/xhtml-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>plumbing - GreenPlumbing</title>
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”/>
<link href=“gpstyle.css” rel=“stylesheet” type=“text/css”/>
</head>
<body>
<div id=“wrapper”>
<div id=“header”>
<img src=“images/gplogo.png” class=“logo”
width=“540” height=“80”
alt=“BeGreenPlumbing logo”/>
<div id=“tagline”>
Maximum Quality<br/>Minimum Waste<br/>Reasonable Price
</div> <!-- end of tagline div –>
</div> <!-- end of header div –>
<div id=“navmenu”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About Us</a></li>
<li><a href=“contact.html”>Contact Us</a></li>
<li><a href=“testimonies.html”>Testimonies</a></li>
<li><a href=“helpfulinfo.html”>Helpful Info</a></li>
</div> <!-- end of navmenu div –>
<div id=“bodycontent”>
<div id=“main”>
<h2>Home</h2>
<p><h4>Plumbing Services You Can Count On Every Time!</h4></p>

&lt;p&gt;We are a small business that strives to give superb service. We have flat rates on many of our services. We have plumbers with many years in the business. Our rates are very competitive with our competition.&lt;/p&gt;
&lt;p&gt;Whether you have a clogged drain, need a hot water heater or a complete remodeling project, Green Plumbing has got it covered.&lt;/p&gt;
&lt;p&gt;Fair Pricing-Quality Work-Beautiful Results&lt;/p&gt;
&lt;p&gt; We hope that with that first call you will never call another plumber again.&lt;/p&gt;

</div> <!-- end of main div –>
<div id=“widget”>
<p><h3>What You Can Expect From Green Plumbing</h3></p>
<p><h4>100% SATISFACTION GUARANTEE</h4></p>
<p>You’ll never be disappointed with our Service.</p>
<p>We guarantee you’ll be pleased, no matter what it takes.</p>
<p><h4>Prices Quoted In Advance</h4></p>
<p>We’ll give you the price, guarantee the price, and guarantee the work.</p>
<p>That way there are no surprises. That’s the way we do business.</p>
<p><h4>PROFESSIONAL SERVICE</h4></p>
You deserve the comfort and peace of mind that comes with having a professionally maintained system. We use only the finest quality products and the most skilled technicians. When you call Green Plumbing, you can be confident that you will have the most professional people in the plumbing service industry today.</p>
</div> <!-- end of widget div –>
</div> <!-- end of bodycontent div –>
<div id=“footer”>
<p>A good name is rather to be chosen<br/>than great riches. - Proverbs 22:1</p>
<div id=“links”>
<a href= >
Contact
</a><br/>
<a href= >
About Us
</a>
<!-- end of links div –>
<h3>Connect With Us</h3>
<div id=“social”>
<p><a href=“http://www.linkedin.com/pub/jeff-silverberg/45/194/901”>
<img src=“images/linkedin.png” alt=“HTML tutorial” width=“32” height=“32” /></a>
<a href=“https://twitter.com/#!/greenplumbingus”>
<img src=“images/twitter.png” alt=“HTML tutorial” width=“32” height=“32” />
</a></p>
<!-- end of social div –>
<!-- end of footer div –>
</div> <!-- end of wrapper div –>
</body>
</html>

/*
CSS
*/

body {
background: url(images/linebg.png);
}

#bodycontent {
margin: auto;
width: 949px;
position: relative;
background: #fff;
border-radius: 7px;
box-shadow: 0px 3px 5px #999;
overflow: hidden;
}

#wrapper {
margin: 0 auto;
width: 949px;
}

p {
color: #000;
font-family: Big Caslon, Times, Georgia;
}

h2 {
font-family: Big Caslon, Times, Georgia;
padding: 20px 20px 0px 20px;
}

h3 {
color: #245b7d;
}

h4 {
color: #154D43;
}

/* MENU */

#navmenu {
margin: auto;
}

#navmenu ul {
background: url(images/nav1.png) no-repeat;
overflow: hidden;
float: left;
width: 949px;
position: relative;
}

#navmenu li {
float: left;
list-style-type: none;
}

#navmenu li a {
color: #fff;
text-shadow: #000 -1px 0px;
display: block;
padding: 10px 11px 10px 11px;
position: relative;
text-decoration: none;
font-size: 18px;
position: relative;
right: 40px;
border-right: 1px solid #245b7d;
height: 20px;
}

#navmenu li a:hover {
background: url(images/nav2.png) no-repeat;
text-decoration: none;
}

#navmenu li,#navmenu li a {
border-radius: 7px 0 0 7px;
}

#navmenu li + li, #navmenu li +li a {
border-radius: 0;
}

#navmenu li a:active {
background: url(images/nav3.png) no-repeat;
}

/* ADJUSTMENTS - TAGLINE - WIDGET - MAIN */

.logo {
position: relative;
right: 10px;
}

#tagline {
position: relative;
top: 13px;
float: right;
right: 70px;
font-family: Optima;
font-size: 19px;
}

#widget {
width: 200px;
padding: 0px 10px 0px 10px;
border: 2px solid #C4C4C4;
border-radius: 7px;
background: #F7F7F7 url(images/wh.png);
background-position: top right;
float: right;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

#main {
padding: 2px 0px 0px 20px;
width: 650px;
float:left;
}

/* FOOTER */

#footer {
background: #EBEBEB;
border-radius: 7px;
box-shadow: 0px 3px 5px #999;
padding: 0 10px 0 25px;
border: 1px solid #fff;
margin-top: 15px;
margin-bottom: 15px;
}

#footer p {
font-family: American Typewriter;
padding: 10px 10px 0 25px;
}

#footer a {
color: #154D43;
font-family: American Typewriter;
float: left;
margin-left: 400px;
margin-top: -50px;
}

#footer h3 {
color: #245b7d;
font-family: Big Caslon;
float: right;
margin-right: 70px;
margin-top: -70px;
}

#social {

}

2

These styles are causing trouble:


#footer a {
  color: #154D43;
  float: left;
  font-family: American Typewriter;
  margin-left: 400px;
  margin-top: -50px;
}

They are causing really big margins, which I’m sure is not what you want.

3

Thanks. Yeah, i realized that earlier and just forgot about my posting, sorry.