Help with Simple Layout

Can anyone take a look at the following code and help with issues I am currently having? This is my first attempt with a pure css layout so any in depth explanations would be greatly appreciative. My current problems are as follows:
1) In the footer, I would like one image to float to the left and one to float to the right and text to float in the middle. But when running it without any text visually it appears side by side rather then locking to the left and to the right.
2) In the main content area, I would like my left and right columns to remain on color while my content (center) column remains white.
Thanks for all your help. I'll keep browsing the net and the forum to see what I can find. Here is the code:

css:
/* CSS Document */

#pgBackground {
width: 680px;
\width: 700px;
w\idth: 680px;
border: 1px solid gray;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: rgb(0, 0, 0);
}
#pgHeader {
border: 1px solid #cecea5;
background-color: rgb(248, 230, 22);
}
#outer_wrapper {
background-color: rgb(255, 255, 255);
}
#wrapper {
background-color: rgb(22, 134, 56);
}
#container {
width: 680px;
float: left;
margin-right: -200px;
background-color: rgb(22, 134, 56);
}
#pgContent {
margin-right: 200px;
background-color: rgb(255, 255, 255);
}
#pgCenter {
margin-left: 150px;
}
#pgLeft {
width: 150px;
float: left;
}
#pgRight {
width: 200px;
float: right;
}
#pgFooter {
border: 1px solid #cecea5;
background-color: rgb(25, 157, 192);
}
.contentEnd {
margin-bottom: 0;
height: 0;
clear: both;
}
#footLeft {
float: left;
margin: 0;
padding: 0;
}
#footRight {
float: right;
margin: 0;
padding: 0;
}
#button {
width: 100px;
border-right: 1px solid #000;
padding: 1em 0 1em 0;
margin-bottom: 0;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #199DBF;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #199DBF;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 5px;
border-left: 10px solid #133890;
border-right: 10px solid #265FE3;
background-color: #194ABE;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #D5C407;
border-right: 10px solid #FCF392;
background-color: #F8E616;
color: #FB0F0C;
}

HTML:
<body>
<div id="pgBackground">
<div id="pgHeader"><img src="images/pgHeader.gif" width="660" height="120" /></div>
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="pgContent">
<div id="pgLeft">
<div id="button">
<ul>
<li><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="services.htm">Services</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</div>
</div>
<div id="pgCenter">
<h1> </h1>
<p> </p>
</div>
</div>
</div>
<div id="pgRight">
<h1> </h1>
<p> </p>
</div>
<div class="contentEnd"></div>
</div>
</div>
<div id="pgFooter">
<p>
<div id="footLeft"><img src="images/pgfooterLeft.gif" width="200" height="120" /></div>
<div id="footRight clearFloat"><img src="images/pgfooterRight.gif" width="233" height="120" /></div>
</p>
</div>
</div>
</body>

Help with Simple Layout

TennesseeGuy

faltered

TennesseeGuy

SuzyUK

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week