3 columns with header and footer

Discussion in 'CSS' started by a-ha, Apr 11, 2007.

  1. #1
    i'm using css for layout design for the first time, and now i have a problem. i need three columns with header and footer. i managed to put central column in place only with position: absolute, but then if the content of central column is longer then content of left and right column, it overlaps with footer.
    is there any advice? here's the css:

    body { margin: 0; padding: 0; width: 100%; }
    #container { width: 100%; }
    div { border: #000 1px solid; }
    #header { width: 100%; float: left; height: 50px;}
    #main-holder { width: 100%; float: left; margin-top: 1px; }
    #main { width: 56%; float: right; position: absolute; left: 22%; right: 22%; overflow: auto}
    #extra { width: 21%; float: right; }
    #subnav { width: 21%; float: left; }
    #footer { width: 100%; float: left; }

    and here's the xhtml:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>3 Column with header and footer</title>
    <link href="sty.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="container">
    <div id="header"><h1>Header</h1></div>

    <div id="main-holder">
    <div id="main">
    <h2>Main Column</h2>
    <p>Lorem ipsum sit dolor amet.Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p>
    <p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p>
    <p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p>
    <p>Lorem ipsum sit dolor amet.Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p>
    </div>

    <div id="subnav">
    <h2>Sub-Nav Column</h2>
    <p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p>
    </div>

    <div id="extra">
    <h2>Extra Column</h2>
    <p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p>
    <p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p>
    </div>
    </div>

    <div id="footer"><h3>Footer</h3></div>

    </div>
    </body>
    </html>
     
    a-ha, Apr 11, 2007 IP
  2. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #2
    You can copy the css from free2sms.net if you like. It is 3 with header and footer.
     
    Colbyt, Apr 11, 2007 IP
  3. briansol

    briansol Well-Known Member

    Messages:
    221
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #3
    avoid absolute positing for your main layout. you will hate yourself in the future :)

    threre's 1000s of these examples on the web. google "css holy grail"
     
    briansol, Apr 11, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Or this:
    
    <!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" xml:lang="en" lang="en">
    <head>
    <title>Three Column CSS Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="keywords" content="Keywords go here" />
    <meta name="description" content="A description of this page goes here." />
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
    </head>
    <body>
    <div id="container">
    	<h1>Main Heading</h1>
    	<ul id="menu">
    		<li><a href="#">Menu Item</a></li>
    		<li><a href="#">Menu Item</a></li>
    		<li><a href="#">Menu Item</a></li>
    		<li><a href="#">Menu Item</a></li>
    		<li><a href="#">Menu Item</a></li>
    		<li><a href="#">Menu Item</a></li>
    	</ul>
    	<div id="main">
    		<div id="content">
    			<h2>Content Heading</h2>
    			<div class="section">
    				<h3>Section Heading</h3>
    				<p>
    					Lorem ipsum dolor sit amet, consectetuer
    					adipiscing elit. In quis erat. Nulla auctor
    					consectetuer erat. Sed est tellus, laoreet et,
    					faucibus et, cursus ut, lectus. Nulla
    					scelerisque, mi vel commodo consequat, turpis
    					ligula congue ligula, eget pellentesque turpis
    					augue quis diam. Nulla facilisi. Etiam commodo
    					quam in metus. Etiam nec nisi ac nisl molestie
    					fermentum. Donec ligula ipsum, venenatis in,
    					egestas vel, commodo bibendum, est. Donec sit
    					amet justo et leo tincidunt rhoncus. Cras
    					aliquam sapien eget nisl. Maecenas vitae arcu
    					et mi gravida porta. Nullam ultricies tempor
    					magna. Sed vel tellus. Etiam sagittis est
    					sagittis odio. Etiam mollis mi ac lacus.
    				</p>
    			</div>
    			<div class="section">
    				<h3>Section Heading</h3>
    				<p>
    					Lorem ipsum dolor sit amet, consectetuer
    					adipiscing elit. In quis erat. Nulla auctor
    					consectetuer erat. Sed est tellus, laoreet et,
    					faucibus et, cursus ut, lectus. Nulla
    					scelerisque, mi vel commodo consequat, turpis
    					ligula congue ligula, eget pellentesque turpis
    					augue quis diam. Nulla facilisi. Etiam commodo
    					quam in metus. Etiam nec nisi ac nisl molestie
    					fermentum. Donec ligula ipsum, venenatis in,
    					egestas vel, commodo bibendum, est. Donec sit
    					amet justo et leo tincidunt rhoncus. Cras
    					aliquam sapien eget nisl. Maecenas vitae arcu
    					et mi gravida porta. Nullam ultricies tempor
    					magna. Sed vel tellus. Etiam sagittis est
    					sagittis odio. Etiam mollis mi ac lacus.
    				</p>
    			</div>
    		</div>
    	</div>
    	<div id="sidebar">
    		<h2>Sidebar Heading</h2>
    		<p>
    			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
    			quis erat. Nulla auctor consectetuer erat. Sed est tellus,
    			laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque,
    			mi vel commodo consequat, turpis ligula congue ligula, eget
    			pellentesque turpis augue quis diam. Nulla facilisi. Etiam
    			commodo quam in metus. Etiam nec nisi ac nisl molestie
    			fermentum. Donec ligula ipsum, venenatis in, egestas vel,
    			commodo bibendum, est. Donec sit amet justo et leo tincidunt
    			rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et
    			mi gravida porta. Nullam ultricies tempor magna. Sed vel
    			tellus.
    		</p>
    	</div>
    	<div id="clear-footer"></div>
    </div>
    <div id="footer">
    	<p>
    		Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights To
    		Scare Unsuspecting Children Reserved.
    	</p>
    </div>
    </body>
    </html>
    
    Code (markup):
    Here's the stylesheet:
    
    
    /*
    	Stylesheet written by Dan Schulz on 28 January 2007.
    	Stylesheet last modified by Dan Schulz on 08 February 2007.
    	Still a work in progress, but the layout elements are mostly complete.
    */
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    html, body {
    	height: 100%;
    }
    
    body {
    	background: #FFF;
    	color: #000;
    }
    
    #container {
    	margin-bottom: -3em;
    	min-height: 100%;
    }
    
    * html #container {
    	height: 100%; /* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */
    }
    
    html>body #container {
    	height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */
    	min-height: 100%; 				/* squashes an IE 7 bug */
    }
    	h1 {
    		background: #FCF;
    		color: inherit;
    		padding: 0.25em 0;
    	}
    
    	#menu {
    		float: left;
    		list-style: none;
    		position: relative;			/* this is needed to set the z-index */
    		width: 8em;
    		z-index: 1;				/* this is needed to fix a depth-sorting error */
    	}
    		#menu li {
    			float: left;			/* IE 5.x bug fix */
    			width: 8em;			/* this is needed since the LI is being floated */
    		}
    
    		#menu a {
    			background: #F66;
    			color: #FFF;
    			display: block;
    			height: 1%;			/* IE 5.01 bug fix */
    			text-decoration: none;
    			text-indent: 0.25em;
    			width: 100%;
    		}
    
    		#menu a:hover {
    			background: #FF5;
    			color: #000;
    		}
    
    	#main {
    		float: left;
    		margin: 0 -13em 0 -8em;
    		width: 100%;
    	}
    		#content {
    			background: #CCF;
    			color: inherit;
    			margin: 0 13em 0 8em;
    			padding: 0 1em;
    		}
    
    		#content h3, #content p {
    			padding: 0.25em 0;
    		}
    
    		#content p {
    			text-indent: 1.5em;
    		}
    
    	#sidebar {
    		background: #FFC;
    		display: inline;			/* IE 5 and 6 bug fix */
    		float: right;
    		padding: 0 1em;
    		width: 11em;
    	}
    	
    	* html #sidebar { /* IE 5.x Box Model Hack */
    		width:13em;
    		w\idth: 11em;
    	}
    		#sidebar p {
    			padding: 0.25em 0;
    		}
    
    	#clear-footer { /* needed to make room for the footer */
    		clear: both;
    		height: 3em;
    	}
    
    #footer {
    	background: #6CF;
    	clear: both;
    	color: inherit;
    	height: 3em;
    }
    	#footer p {
    		padding-top: 1em;
    		text-align: center;
    	}
    
    Code (markup):
    Oh, and the footer will be stuck at the bottom of the page if there isn't enough content to push it over the edge. :)
     
    Dan Schulz, Apr 13, 2007 IP