In my code below, the footer doesn't clear at the bottom of the localnav and content DIVS ? Instead the footer is displaying behind the localnav DIV.
Can anybody help ? 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> #wrapper{ position: relative; background-color: #FFFFFF; border: 1px solid #000000; width: 780px; margin: 0 auto; text-align: left; } .navblock{ display: block; background-color: #193C65; padding-top: 2px; padding-bottom: 3px; border-top: 1px solid #FFFFFF; } #header{ background-color: #193C65; height: 64px; border-bottom: 1px solid #DEDEDE; width: 780px; overflow: hidden; background: url(header-m.jpg) repeat-x 0 0; } .menu { background-color: #313131; border-top: 1px solid #B5B5B5; height: 20px; font-weight: bold; font-family: tahoma,verdana, arial, sans-serif; font-size: 11px; padding: 0 0px 0 0px; position:relative; z-index:100; } #localnav{ float: left; position: absolute; width: 154px; height: 100%; background-image:url(bg2.gif); background-repeat: repeat; text-align: center; font-family: tahoma,verdana, arial, sans-serif; font-size: 10px; font-weight: bold; color:#FFFFFF; } #localnav ul{ list-style: none; margin-left: 7px; margin-top: 5px; padding: 0; background-color: #255082; } #localnav li{ text-align: left; border-top: 1px solid #193C65; border-left: 1px solid white; font-size: 10px; background-image: url(navarrow.gif); padding: 0 0 0 20px; background-repeat: no-repeat; line-height: 20px; } #localnav a{ text-decoration: none; font-weight: bold; color: #ffffff; } #localnav a:hover{ font-weight: bold; color: red; } .navpics{ position: relative; display: block; margin-top: -20px; } #content{ float: right; width: 585px; background-color: #ffffff; background-image: url(shading.gif); background-repeat: repeat-x; background-position: 0% 0%; padding: 20px; } #footer { clear: both; background-color: #404040; padding: 3px; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div class="mainlogo"><img src="logo.gif" alt="text" height="55" width="174" /></div> <div id="topnav"> <ul> <li><a href="#">Search</a></li> <li><a href="#">Feedback</a></li> </ul> </div> </div> <div class="menu"> Menu here </div> <div id="localnav"> <p class="navblock">Navigation</p> <img class="navpics" src="image.gif" alt="picture"> <ul> <li><a href="">Link1</a> </li> <li><a href="">Link2</a> </li> <li><a href="">Link3</a> </li> </ul> </div> <div id="content"> <p>text</p> </div> <div id="footer"> Footer text </div> </div> </body> </html> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
