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

    3 column CSS layout - Content overlapping leftnav?

    Thanks in advance to anyone who can help me! I am a web designer trying to learn CSS. I am using a 3 column faux layout. (Image as background tiling down the page) Everything looked great until I changed some stylesheet data so my stylesheet would validate. For some reason, my entire middle content div shifted a little bit onto my left navbar div after uploading my validated stylesheet. I tried playing with margins and widths. I cannot figure out what I did or why this is happening. I'm so frustrated. Anyone have any ideas? I would really appreciate any input.

    This is my website ---> (Ironic that I'm trying to explain how to construct websites correctly) http://www.makeawebsitework.com/test.html

    This is my CSS Code --->
    Code:
    * { padding: 0; margin: 0; }
    
    body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
    }
    #whole { 
     margin: 0 auto;
     width: 1020px;
    }
    #columns {
     background: url(../image-files/makeawebsite.jpg);
     margin-bottom: 0px;
     overflow: auto;
     width: 100%
    }
    #header {
     color: #333;
     width: 1000px;
     padding: 10px;
     height: 180px;
     margin: 10px 0px 0px 0px;
     background-image: url(../image-files/weblogo.jpg);
     border-bottom: 2px solid #000000;
    }
    #header a {
    
    color: #ffffff;
    text-decoration: underline;
    font-weight: bold;
    font-family: Arial;
    font-size: 14px;
    
    }
    
    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: 0px;
     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: 5px 10px;
     padding: 0px;
     width: 597px;
     display: inline;
     position: relative;
    }
    #rightcolumn { 
     display: inline;
     background-color: #968e61;
     margin: 0px 0px 10px 10px;
     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: 13px;
      line-height: 11pt;
      margin-top: 3px;
      margin-right: 0;
      margin-bottom: 3px;
      margin-left: 0;
      padding-bottom: 9px;
    }
    
    p.class {
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 15px;
     font-weight: bold;
     line-height: 18pt;
    
    }
    p.bot {
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 12px;
     font-weight: bold;
     line-height: 16pt;
    }
    p.bold {
    	font-weight: bold;
    	font-size: 14px;
    }
    p.bigtext {
    	font-size: 14px;
    	font-weight: bold;
    	color: #666633;
    }
    
    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;
    }
    h3 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #333333;
    	line-height: 20px;
    	text-decoration: underline;
    }
    #divback {
    	width: 580px;
    	background-color: #CCCC99;
    
    }
    #divholder {
    	width: 190px;
    	text-align: center;
    	
    }
    #divholder2 {
    	width: 1000px;
    	text-align: center;
    	
    }
    #divcost {
    	width: 300px;
    	float: left;
    	}
    #divcost2 {
    	width: 290px;
    	float: right;
    
    }
    #divbrown {
    	background-color: #CCCC99;
    }
    	
    #top {
    	text-align: center;
    }
    #divcost3 {
    	width: 300px;
    	text-align:center;
    	float: left;
    	}
    
    	
    .images { text-align: center; }
    .clear { clear: both; background: none; }
    Last edited by WebLizzard; 01-13-2010 at 03:13 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello WebLizzard,
    Just to put a visual on it so you can see what's going on, try putting background colors on the columns.
    Like this -
    Code:
    #leftnav { 
     display: inline;
     color: #333;
     margin: 0px;
     padding: 0px;
     width: 195px;
     float: left;
     background: #f00;
     text-decoration: underline;
    }
    #content { 
     float: left;
     color: #333;
     margin: 5px 10px;
     padding: 0px;
     width: 597px;
     display: inline;
     position: relative;
    background: #0f0;
    }
    #rightcolumn { 
     display: inline;
     background: #00f;
     margin: 0px 0px 10px 10px;
     padding: 0px;
     width: 195px;
     float: right;
    }
    You will also need to understand how the box model works. margin/padding/border all add up when figuring the total width of an element.
    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 (01-13-2010)


  •  

    Posting Permissions

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