If someone could help me out here, I would appreciate it! It seems as though my sidebar is lingering at the bottom of my page, and I want it to stretch from header to footer. you can see the problem page here info-asbestos.net Here is the stylesheet: body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; background-image:url(BIG-Flames.jpg); background-color:#000000; } #wrapper{ width: 800px; background-color:#FFFFFF; position: center; margin: 0 auto; padding: 2px 2px 2px 2px; } a:link, a:visited, a:hover { color: #006699; text-decoration: none; } a:hover { text-decoration: underline; } /* overrides decoration from previous rule for hovered links */ h1, h2, h3, h4, h5, h6 { font-family: Arial,sans-serif; margin: 0px; padding: 0px; } h1{ font-family: Verdana,Arial,sans-serif; font-size: 120%; color: #334d55; } h2{ font-size: 114%; color: #000000; } h3{ font-size: 100%; color: #334d55; } h4{ font-size: 100%; font-weight: normal; color: #333333; } h5{ font-size: 100%; color: #334d55; } ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } label{ font: bold 100% Arial,sans-serif; color: #334d55; } /***********************************************/ /* Layout Divs */ /***********************************************/ #masthead{ margin: 0; padding: 0px 0px; border-bottom: 1px solid #cccccc; width: 100%; background-color:#000000; } #navBar{ padding: 0px; background-color: 000000; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; color:#FFFFFF; float:left; height:100%; } #content{ width: 75%; margin: 0; padding: 0 3% 0 0; } /***********************************************/ /*Component Divs */ /***********************************************/ #siteName{ margin: 0px; padding: 0px 0px 10px 10px; } /*************** #pageName styles **************/ #pageName{ padding: 0px 0px 10px 10px; font:Arial, Helvetica, sans-serif; } /************* #globalNav styles **************/ #globalNav{ color: #cccccc; padding: 0px 0px 0px 10px; white-space: nowrap; } /* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line this will force a horizontal scrollbar if there isn't enough room for all links remove rule or change value to 'normal' if you want the links to line-wrap */ #globalNav img{ display: block; } #globalNav a { font-size: 90%; padding: 0px 4px 0px 0px; } /************* #breadCrumb styles *************/ #breadCrumb{ font-size: 80%; padding: 5px 0px 5px 10px; } /************** .feature styles ***************/ .feature{ padding: 0px 0px 10px 10px; font-size: 80%; } .feature h3{ padding: 30px 0px 5px 0px; text-align: center; } .feature img{ float: left; padding: 0px 10px 0px 0px; margin: 0 5px 5px 0; } .feature div{ border-bottom: 1px solid #000000; } .story img{ float: right; padding: 0px 10px 0px 0px; margin: 0 5px 5px 0; } /* adjust margins to change separation between the feature image and text flowing around it */ /************** .story styles *****************/ .story{ clear: both; padding: 10px 0px 0px 10px; font-size: 80%; } .story p{ padding: 0px 0px 10px 0px; } /************* #siteInfo styles ***************/ #siteInfo{ clear: both; border: 1px solid #cccccc; font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; margin-top: 0px; } /* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with) the bottom border of the navBar in cases where they "touch" */ #siteInfo img{ padding: 4px 4px 4px 0px; vertical-align: middle; } /************* #search styles ***************/ #search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%; } #search form{ margin: 0px; padding: 0px; } #search label{ display: block; margin: 0px; padding: 0px; color:#FFFFFF; } /*********** #navBar link styles ***********/ #navBar ul a:link, #navBar ul a:visited {display: block; color:#FFFFFF; } #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; border-bottom: 1px solid #cccccc; font-size: 90%; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a:link{ padding: 2px 0px 2px 10px; border-top: 1px solid #cccccc; width: 100%; voice-family: "\"}\""; voice-family:inherit; width: auto; } #sectionLinks a:visited{ border-top: 1px solid #cccccc; padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ border-top: 1px solid #cccccc; background-color: #dddddd; padding: 2px 0px 2px 10px; } /*********** .relatedLinks styles ***********/ .relatedLinks{ margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } /************** #advert styles **************/ #advert{ padding: 10px 0px 0px 10px; font-size: 80%; border-top: 1px solid #cccccc; } #advert img{ display: block; } /************** #headlines styles **************/ #headlines{ margin: 0px; padding: 10px 0px 20px 10px; font-size: 80%; } #headlines p{ padding: 5px 0px 5px 0px; } Code (markup):
Here, this is what I use: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SEO 2 column fix flex, sidebar left | Allmar Technologies</title> <meta name="Author" content="Allmar Technologies, www.allmartech.com" /> <style type="text/css"> * { padding: 0; margin: 0; } p { margin: 14px 0 0 0; } html { background: #888; } body { font-family: verdana,arial,helvetica,sans-serif; font-size: small; min-width: 768px; max-width: 992px; color: #000; background: #fff; margin: 1em auto; letter-spacing: 1px; background: #888; } #pageWrapper { width: 100%; margin: 0 auto; border-top: 15px solid #072a60; } #header { height: 80px; background: #aaa; } #contentWrapper { float: left; width: 100%; background: #808; } #mainWrapper { float: right; width: 100%; margin: 0 0 0 -250px; background: #000;} #main { line-height: 1.5em; margin: 0 0 0 250px; background: #fff; } #breadcrumbs { font-size: 75%; } #sidebar { float: left; width: 250px; height: 400px; background: #ddd; } #footer { clear: both; font-size: 70%; color: #fff; background: #072a60; line-height: 3em; text-align: center; } .bullet { color: #ca0016; background: #072a60; } #footer a, #footer a:link, #footer a:visited { color: #fff; background: #072a60; text-decoration: none; border-bottom: 1px solid #ca0016; } </style> <!--[if lt IE 7]> <style type="text/css"> html #pageWrapper { width:expression(document.body.clientWidth > 992? "992px" : "auto"); } </style> <![endif]--> </head> <body> <div id="pageWrapper"> <div id="header"></div> <div id="contentWrapper"> <div id="mainWrapper"> <div id="main"> <span id="breadcrumbs">breadcrumbs</span> <p>The quick brown fox jumps over the lazy dog.</p> </div> </div> <div id="sidebar">This is the sidebar.</div> </div> <div id="footer">Footer</div> </div> </body> </html> HTML: HTH