...
PDA

View Full Version : Resolved 2 column layout - padding on right side ineffective

tarheelblue50
06-11-2012, 10:06 PM
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:

<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)


#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.
waxdoc
06-12-2012, 12:24 AM
I couldn't test this fully, but combined all your separate CSS file into one (which makes it easier to see what's going on -- such as font-family being repeated). Added a #main_container to encompass both #main_body and #sidebar, and created #main_body p { text-align: left; padding: 0 20px; }


@charset "UTF-8";
/*@charset "ISO-8859-1";*/
/* CSS Document */
html, body {
padding: 0; margin: 0;
background-color: #909090;
}
#wrapper {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;;
/*background-color: #909090; */ background: transparent;
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;
}

#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;
}

#main_container { position: relative; margin: 0 auto; width: 100%; }
#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;
}
#main_body p { text-align: left; padding: 1px 20px; }

===========
<html>
<head>
<title>Pro Basketball Archive</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="proball.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="p7ehc/p7EHCscripts.js"></script>
</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_container">
<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><!-- close main_container -->
<div id="footer">Content for id "footer" Goes Here</div>
</div>

<!-- End Save for Web Slices -->
</body>
</html>


Not sure what was going on with that position: absolute div (which take element out of doc flow), but float would not have effect there.
tarheelblue50
06-12-2012, 01:56 AM
Thanks a lot. Quick easy fix.

I also appreciate the streamlining you did there to make things a little less complicated. Like I said, I'm new to the ins and outs of CSS so it's good to get a little guidance.

Thank you!
waxdoc
06-12-2012, 02:21 AM
You're more than welcome.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum