After hours of learning CSS layouts for the first time and attempting to code mine just the way I wanted it, I've got everything finally right.
Everything except one small issue.
I can't seem to get the right padding on my main content column (main_body) to go into effect. I'm nearly positive this has something to do with the fact that I'm floating that main column left. Or something else obvious. But I don't know enough about CSS just yet to understand what to do differently or how to fix it so that the content on the right side of the main column doesn't press right up against the sidebar (navbar) on the right.
My website:
http://probasketballarchive.com/template.html
My HTML:
Code:
<html>
<head>
<title>Pro Basketball Archive</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/main_layout.css?v=3.7" rel="stylesheet" type="text/css">
<link href="/main_body.css?v=4.4" rel="stylesheet" type="text/css">
<link href="/navbar.css?v=4.4" rel="stylesheet" type="text/css">
<link href="/footer.css?v=4.0" rel="stylesheet" type="text/css">
<script type="text/javascript" src="p7ehc/p7EHCscripts.js"></script>
<style>
body{
height: 100%;
margin-left:auto;
margin-right:auto;
background-color: #909090;
}
</style>
</head>
<body>
<!-- Save for Web Slices (template.psd) -->
<div id="wrapper">
<div id="header"></div>
<div id="home"></div>
<div id="about"></div>
<div id="teams"></div>
<div id="teamsarrow"></div>
<div id="players"></div>
<div id="playersarrow"></div>
<div id="openlink"></div>
<div id="sidebar"></div>
<div id="above_body"></div>
<div id="navbar_header"></div>
<div id="main_body" class="p7ehc-a">
<p><strong>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
<p><strong>CONTENT</strong></p>
</div>
<div id="navbar" class="p7ehc-a">
<p>Content for id "navbar" Goes Here</p>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
My CSS: (Main_body and navbar are at the bottom)
Code:
#wrapper {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
background-color: #909090;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
min-height: 100%;
position: relative;
width: 1020px;
}
#header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
height: 200px;
width: 1000px;
float: left;
}
#home {
background-image: url(/images/home.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 134px;
float: left;
}
#about {
background-image: url(/images/about.jpg);
background-repeat: no-repeat;
height: 40px;
width: 135px;
float: left;
}
#teams {
background-image: url(/images/teams.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 97px;
}
#teamsarrow {
background-image: url(/images/teams_arrow.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 36px;
}
#players {
background-image: url(/images/players.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 94px;
}
#playersarrow {
background-image: url(/images/players_arrow.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 41px;
}
#openlink {
background-image: url(/images/open_box.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 142px;
}
#sidebar {
background-image: url(/images/sidebar.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 321px;
}
#above_body {
background-image: url(/images/above_body.jpg);
background-repeat: no-repeat;
float: left;
height: 76px;
width: 822px;
}
#navbar_header {
background-image: url(/images/nav-header.jpg);
background-repeat: no-repeat;
float: left;
height: 76px;
width: 178px;
}
#main_body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFF;
background-image: url(/images/content-bg.jpg);
background-repeat: repeat-y;
float: left;
width: 819px;
overflow: hidden;
padding-left: 10px;
padding-right: 15px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFF;
}
#navbar {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #FFF;
text-decoration: underline;
background-image: url(/images/navbar-bg.jpg);
background-repeat: repeat-y;
width: 181px;
position: absolute;
right: 0px;
top: 316px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-left: 5px;
float: left;
}
#footer {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
color: #FFF;
background-image: url(/images/footer.jpg);
background-repeat: no-repeat;
height: 83px;
width: 1000px;
position: relative;
text-align: center;
padding-top: 40px;
clear: both;
}
Any help is much appreciated to get this one final thing fixed.
Before you post, read our: 
