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>
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"
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 © 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.