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 to the CF scene
    Join Date
    Dec 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with centered 3 column layout

    I am trying to make a centered 3 column layout with a banner on the top with a width of 700px.

    So there would be the banner/header, and then below it, the 3 columns.

    I just have absolutely no idea what I am doing wrong.

    HTML

    Code:
    <body>
    <div id="wrapper">
    
    		<div id="banner">
                    banner
    		</div>
    	
    		<div id="navi">
                    ---------------
    		</div>
    		
    		<div class="bodyPara">
                    ---------------
    		</div>
    		
    		<div id="right">
                    ---------------
    		</div>
    
    </body>
    Code:
    body {
    
    	text-align: center;
    	
    }
    
    #wrapper {
    
    	border-style: solid;
    	border-width: thin;
    
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 0;
    	margin-bottom: 0;
    	width: 700px;
    	
    	text-align: left;
    	
    }
    
    
    #banner {
    
    	border-style: solid;
    	border-width: thin;
    
    	width: 700px;
    	height: 75px;
    	text-align: left;
    	
    	padding: 0;	
    }
    
    #navi {
    
    	border-style: solid;
    	border-width: thin;
    	
    	width: 80px;
    	height: auto;
    	text-align: left;
    	
    	float: left;
    	
    	padding: 0;	
    	
    }
    
    .bodyPara {
    
    	border-style: solid;
    	border-width: thin;
    
    	width: 500px;
    	height: auto;
    	text-align: left;
    	
    	float: left;
    	
    	padding: 0;	
    	
    }
    
    #right {
    
    	border-style: solid;
    	border-width: thin;
    
    	width: 120px;
    	height: auto;
    	text-align:left;
    	
    	float: left;
    	
    	padding: 0;
    
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ThatOtherGuy,
    Have a look at http://www.nopeople.com/CSS/faux_3-column/ and see if that doesn't give you a better start.
    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

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    text-align: center;
    }
    #wrapper {
    border:1px solid #000;
    width:700px;
    text-align: left;
    margin:auto;	
    }
    #banner {
    border:1px solid #000;
    height: 75px;
    }
    #navi {
    border:1px solid #000;
    width: 80px;
    float: left;
    }
    
    .bodyPara {
    border:1px solid #000;
    width: 494px;
    float: left;
    }
    
    #right {
    border:1px solid #000;
    width:120px;
    float:left;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="banner"> banner </div>
    	<div id="navi"> --------------- </div>
    	<div class="bodyPara"> --------------- </div>
    	<div id="right"> --------------- </div>
    	<div class="clear">&nbsp;</div>
    </div>
    </body>
    </html>
    You didn't understand the box model correctly. Your elements' widths were adding up to be more than 700px.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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