Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    2 column layout - padding on right side ineffective

    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.
    Last edited by tarheelblue50; 06-12-2012 at 02:57 AM.

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    style <P> with paddig

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

    Code:
    @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.
    Last edited by waxdoc; 06-12-2012 at 01:29 AM.

  • Users who have thanked waxdoc for this post:

    tarheelblue50 (06-12-2012)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts
    You're more than welcome.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •