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 Coder
    Join Date
    Nov 2010
    Posts
    94
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Quick positioning layout in CSS help

    Hi guys

    I'm having a bit of trouble with my css layout...

    I want 3 column boxes on my page, inside my header/footer that align perfectly, a content box in the middle with 2 sidebars on either side, that is aligned with the header/footer, and doesn't move when the page is resized.

    At the moment they don't line up properly, and they move when the page is resized!

    Any help appreciated.

    _____
    _____
    _ __ _
    _ __ _
    _____
    _____



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>CSS Menu </title>
    		<link rel="stylesheet" type="text/css" href="WebAir.css" />
    	</head>
     	<body>
     	
     		<div id="logo"
    			<img src="images/logo.png" alt="Our logo" />
    		</div>
    		
    		<div id="menu_wrapper">		
    			<ul id="menu">
    				<li class="active"><a href="#">Home</a></li>
    				<li><a href="index2.html">Flight Check</a></li>
    				<li><a href="index3.html">Holiday</a></li>
    				<li><a href="index4.html">Hotel</a></li>
    				<li><a href="index5.html">Car Rental</a></li>
    				<li><a href="index6.html">Insurance</a></a></li>
    				<li><a href="index7.html">Contact</a></li>
    			</ul>
    		</div>
    		
    		        <div id="left">
                <h1>MENU left</h1> 
       <p>Testing box</p>
       <p>Testing box</p>
            </div>
      
     
     
            
            <div id="content">
             <h1>CONTENT</h1>  
       			<p>Home</p>
      
          
          </div>
                
            <div id="right">
                <h1>MENU right</h1>
       <p>Testing box</p>
       <p>Testing box</p>
       <p>Testing box</p>
    
            </div>
            
            
    		
    				<div id="footer">
       					<p>WebAir by the Three Amigos</p>
     				</div>
     
     		
    	</body>
    </html>
    Code:
    			body {
    				padding: 50px;
    			}
    			/* The CSS Code for the menu starts here */
    			#menu {
    				font-family: Arial, sans-serif;
    				font-weight: bold;				
    				margin: 50px 0;
    				padding: 0;
    				list-style-type: none;
    				background-color: #eee;
    				font-size: 13px;
    				height: 40px;
    				border-top: 2px solid #eee;
    				border-bottom: 2px solid #ccc;
    			}
    			
    			#menu li {
    				float: left;
    				margin: 0;				
    			}
    			
    			#menu li a {
    				color: #fff;
    				text-decoration: none;
    				display: block;
    				padding: 0 20px;
    				line-height: 40px;			
    			}
    			
    			#menu li a:hover, #menu li.active a {			
    				border-bottom-color: #2894d1;			
    				color: #b7e3fa; 
    				background: #c10e06; 
    				border-bottom: 2px solid;
    			}
    			
    			#menu_wrapper ul {
    				border-bottom-color: #348bba;
    				border-top-color: #3099d1;
    				margin-left: 12px;
    				border-top: 2px solid;
    				border-bottom: 2px solid;
    				background: #2885b8;
    			}
    				
    			#menu_wrapper {
    				padding: 20px;
    			}
    			
    			#menu_wrapper div {
    				float: left; 
    				height: 44px; 
    				width: 12px; 
    			}
    			
    			#logo {
    				position: absolute; 
    				top: 2px; 
    				left: 70px;
    			}
    			
    			 
    			#footer {
    				border-top: 2px solid;
    				border-bottom: 2px solid;
    				background: #2885b8;
    				text-align: center;
    				font-family: Arial, sans-serif;			
    				margin-left: 35px;
    				margin-right: 16px;
    				padding-top:: 2px;
    				padding-bottom: 2px;
    				font-size: 13px;
    				height: 40px;
    				clear: left;
    			}
    			
    			#footer p {
    				color: white;
    				font-weight: bold;
    			}
    			
    			#left {
       			text-align: center;
                width:200px;
                height: 470px;
       			margin: 5px;
                padding:0px;
                margin-left: 35px;
                float:left;
                background-color: #0099CC;
                overflow: auto;
                border: 2px solid black;
            	}
              
            	#content {
       			text-align: center;
                width: 350px;
       			height:470px;
      		 	margin: 5px;
                padding:10px;
                float:left;
                background-color:#fff;
                overflow: auto;
                border: 2px solid black;
            	}
            
            	#right {
       			text-align: center;
                width:200px;
       			height:470px;
       			margin: 5px;
                padding:0px;
                margin right: 35px;
                float:left;
                background-color:#FF3300;
                overflow: auto;
                border: 2px solid black;
            	}

  • #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 switch,
    Without even looking at your site yet I can see you would benefit from using the validators. Check out the links about validation in my signature line below.

    They will find little errors like this for you:
    Code:
    <div id="logo">
    			<img src="images/logo.png" alt="Our logo" />
    		</div>
    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:

    swiltch (02-21-2011)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    94
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Thankyou for that, I will bookmark them.

    Any tips for the 3 column layout?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by swiltch View Post
    Any tips for the 3 column layout?
    If you put your 3 columns in a containing element with a width they won't drop when the screen narrows.
    Have a look at this example -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Menu</title>
    <style type="text/css">
    body {padding: 50px;}
    #logo {
    	position: absolute;
    	top: 2px;
    	left: 70px;
    }
    #menu_wrapper {padding: 20px;}
    /*#menu_wrapper div {
    	float: left;
    	height: 44px;
    	width: 12px;
    }  You do not have a #menu_wrapper div in your markup*/
    /* The CSS Code for the menu starts here */
    #menu_wrapper ul {
    	border-bottom-color: #348bba;
    	border-top-color: #3099d1;
    	margin-left: 12px;
    	border-top: 2px solid;
    	border-bottom: 2px solid;
    	background: #2885b8;
    /*
    }
    #menu {
    	margin: 50px 0;
    	background: #eee;
    	border-top: 2px solid #eee;
    	border-bottom: 2px solid #ccc;
    #menu_wrapper ul and #menu are the same ul#menu
    */
    	font-family: Arial, sans-serif;
    	font-weight: bold;
    	padding: 0;
    	list-style-type: none;
    	font-size: 13px;
    	height: 40px;
    }
    #menu li {
    	float: left;
    	margin: 0;
    }
    #menu li a {
    	color: #fff;
    	text-decoration: none;
    	display: block;
    	padding: 0 20px;
    	line-height: 40px;
    }
    #menu li a:hover, #menu li a.active {
    	border-bottom-color: #2894d1;
    	color: #b7e3fa;
    	background: #c10e06;
    	border-bottom: 2px solid;
    }
    #contentWrapper {
    	width: 815px;
    	margin: 0 auto;
    	overflow: auto;
    	background: #f63; /*for demo only*/
    }
    #left {
    	text-align: center;
    	width:200px;
    	height: 470px;
    	margin: 5px;
    	padding:0px;
    /*margin-left: 35px;*/
    	float:left;
    	background: #0099CC;
    	overflow: auto;
    	border: 2px solid black;
    }
    #content {
    	text-align: center;
    	width: 350px;
    	height:470px;
    	margin: 5px;
    	padding:10px;
    	float:left;
    	background:#fff;
    	overflow: auto;
    	border: 2px solid black;
    }
    #right {
    	text-align: center;
    	width:200px;
    	height:470px;
    	margin: 5px;
    	padding:0px;
    /*margin right: 35px; invalid*/
    	float:left;
    	background:#FF3300;
    	overflow: auto;
    	border: 2px solid black;
    }
    #footer {
    	border-top: 2px solid;
    	border-bottom: 2px solid;
    	background: #2885b8;
    	text-align: center;
    	font-family: Arial, sans-serif;
    	margin-left: 35px;
    	margin-right: 16px;
    /*padding-top:: 2px; invalid*/
    	padding-bottom: 2px;
    	font-size: 13px;
    	height: 40px;
    	clear: left;
    }
    #footer p {
    	color: white;
    	font-weight: bold;
    }
    </style>
    </head>
    <body>
        <div id="logo"> <img src="images/logo.png" alt="Our logo" /> </div>
            <div id="menu_wrapper">
                <ul id="menu">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="index2.html">Flight Check</a></li>
                    <li><a href="index3.html">Holiday</a></li>
                    <li><a href="index4.html">Hotel</a></li>
                    <li><a href="index5.html">Car Rental</a></li>
                    <li><a href="index6.html">Insurance</a></li>
                    <li><a href="index7.html">Contact</a></li>
                </ul>
            <!--end menu_wrapper--></div>
        <div id="contentWrapper">
        <div id="left">
            <h1>MENU left</h1>
                <p>Testing box</p>
                <p>Testing box</p>
        <!--end left--></div>
            <div id="content">
                <h1>CONTENT</h1>
                <p>Home</p>
            <!--end content--></div>
                <div id="right">
                    <h1>MENU right</h1>
                    <p>Testing box</p>
                    <p>Testing box</p>
                    <p>Testing box</p>
                <!--end right--></div>
        <!--end contentWrapper--></div>
            <div id="footer">
                <p>WebAir by the Three Amigos</p>
            </div>
    </body>
    </html>
    Even easier would be to copy the method used in this simple 3 column layout.
    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


  •  

    Posting Permissions

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