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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2009
    Location
    Maryland
    Posts
    47
    Thanks
    21
    Thanked 0 Times in 0 Posts

    CSS 3 columns faux method - right side bar has bigger width?

    Thanks in advance to anyone who can help...

    I have a 3 column CSS layout. I'm using the faux columns method (with background image tiling down my page) to get my left and right side bars to look like they touch my footer.

    Everything went well except my brown right side bar seems to have a bigger width than my left brown side bar. On the one background image that is tiled down my page, I scaled it as best as I could so the right and left sidebars are the same width. I'm not sure why they are not showing up as the same width. I think it has something to do with my padding or margins. (Which I am horrible at!)

    My main page can be found here: http://www.littlelizzard.com/index2.html
    See how my right side bar is a lot wider than my left? I want that right side bar to be the same width as my left... and I want to keep my content width so it fits between the two.
    And this is my CSS code: (Please excuse the mess. This page is a work in progress)
    Any help is greatly appreciated.

    Code:
    * { padding: 0; margin: 0; }
    
    body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
    }
    #whole { 
     margin: 0 auto;
     width: 1020px;
    }
    #columns {
     background: url(http://www.littlelizzard.com/makeawebsite.gif);
     margin-bottom: 0px;
     overflow: auto;
     width: 100%
    }
    #header {
     color: #333;
     width: 1000px;
     padding: 10px;
     height: 180px;
     margin: 10px 0px 0px 0px;
     background-image: url(littlelizzard.com/weblogo.jpg);
     border-bottom: 2px solid #000000;
    }
    #header a {
    
    color: #ffffff;
    text-decoration: underline;
    font-weight: bold;
    font-family: Arial;
    font-size: 14 px;
    
    }
    
    div#navbar2 {
    
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    padding: 10px;
    margin: 0px 0px 0px 0px;
    background-color: #666633;
    height: 10px;
    
    
    }
    
    
    div#navbar2 ul {
    
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    line-height: 10px;
    white-space: nowrap;
    
    
    }
    
    
    div#navbar2 li {
    
    list-style-type: none;
    display: inline;
    
    
    }
    
    
    div#navbar2 li a {
    
    
    text-decoration: none;
    padding: 7px 10px;
    color: #000000;
    
    
    }
    
    
    div#navbar2 li a:link {
    color: #000000;
    
    }
    
    
    div#navbar2 li a:visited {
    color: #000000;
    
    
    }
    
    
    div#navbar2 li a:hover {
    font-weight: bold;
    color: #000000;
    text-decoration: underline;
    
    }
    #leftnav { 
     display: inline;
     color: #333;
     margin: 10px;
     padding: 0px;
     width: 195px;
     float: left;
     background-color: #968e61;
     text-decoration: underline;
    }
    #leftnav ul
    {
    	margin-left: 0;
    	padding-left: 0;
    	list-style-type: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	text-align: center;
    }
    
    #leftnav a
    {
    	display: block;
    	width: 178px;
    	padding-top: 7px;
    	padding-right: 3px;
    	padding-bottom: 7px;
    	padding-left: 3px;
    	border-bottom-width: 1px;
    }
    
    #leftnav a:link, .navlist a:visited
    {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    }
    
    #leftnav a:visited
    {
       color: #000000;
       text-decoration: underline;
       font-weight: bold;
    }
    
    #leftnav a:hover
    {
    	text-decoration: none;
    	color: #000000;
    	background-color: #666633;
    }
    
    #content { 
     float: left;
     color: #333;
     margin: 10px 13px;
     padding: 0px;
     width: 565px;
     display: inline;
     position: relative;
    }
    #rightcolumn { 
     display: inline;
     background-color: #968e61;
     margin: 10px 10px 10px 0px;
     padding: 0px;
     width: 195px;
     float: right;
    
    }
    #footer { 
     width: 1000px;
     clear: both;
     color: #333;
     background: #ABBEBE;
     background-color: #CCCCCC;
     margin: 0px 0px 10px 0px;
     padding: 10px;
    }
    p {
    	font-family: Georgia, Times New Roman, Times, serif;
    	font-size: 12px;
    	line-height: 11pt;
    	margin-top: 3px;
    	margin-right: 0;
    	margin-bottom: 3px;
    	margin-left: 0;
    	padding-bottom: 9px;
    }
    
    a {
    	color: #0000FF;
    	font-weight: bold;
    	text-decoration: underline;
    }
    a:visited {
    	color: #0000FF;
    	text-decoration: underline;
    	font-weight : bold;
    }
    a:hover {
    	color: #666633;
    	text-decoration: inherit;
    }
    
    
    h1 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 22px;
    	font-weight: bold;
    	color: #333333;
    	line-height: 24px;
    }
    h2 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 17px;
    	font-weight: bold;
    	color: #333333;
    	line-height: 20px;
    }
    #divback {
    	width: 580px;
    	background-color: #CCCC99;
    
    }
    .clear { clear: both; background: none; }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello WebLizzard,
    You'll need a new background image... or narrow up your layout to match the image your using.
    Your existing image is 922px wide.
    Your site is 1020px wide with the background image repeated on both X and Y axis (that's what's making the right column wider).

    Make your CSS look like this to show what's really happening -
    Code:
    #columns {
     background: url(http://www.littlelizzard.com/makeawebsite.gif) no-repeat;
     margin-bottom: 0px;
     overflow: auto;
     width: 100%
    }
    Also try this -
    Code:
    #columns {
     background: url(http://www.littlelizzard.com/makeawebsite.gif) repeat-y;
     margin-bottom: 0px;
     overflow: auto;
     width: 100%
    }
    Last edited by Excavator; 12-19-2009 at 10:38 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    WebLizzard (12-19-2009)

  • #3
    New Coder
    Join Date
    Aug 2009
    Location
    Maryland
    Posts
    47
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Thanks so much Excavator! I really appreciate your help.

    I should've realized this since I started out with the 922px and then made it a bit wider a few days later. I kind of feel dumb that I didn't think of that. And I wasn't sure if it was a margin/padding issue either. I'm still learning CSS, so I am kind of slow when it comes to recognizing my mistakes.

    Thanks again!!!


  •  

    Posting Permissions

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