I'm trying to have a 2 column layout with a header and footer spanning both columns. This is what I have not but the left nav and the footer are tab in 40-50 px and I don't want that... I don't know why it's doing it. Also in IE the footer doesn't have a horizontal nav bar but messes it up and makes it vertical and the body makes it's way left of the left nav (even though the body is on the right.) <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html> <head> <title>The DCole Server @ http://dcole.ath.cx</title> <style type='text/css'> body { font-size: 12px; font-family: Verdana,Tahoma, Arial,sans-serif; } #title { background-color: #0000FF; color:#990000; float: left; width: 400px; height: 100px; margin: 0px 0px 0px 50px; padding: 0px; font-size:40px; } #info { background-color: #FF0000; color:#990000; padding: 0px; margin-left: 400px; margin-right: 50px; padding: 0px 0px 0px 0px; height: 100px; text-align: right } div.left { float: left; width: 200px; margin: 0px 0px 0px 50px; padding: 0px; background-color: #666666; color: #323232; } div.left ul { list-style: none; } div.left li a { display: block; border-left: solid 0.5em #EAEAEA; border-top: solid 1px #C8C8C8; background-color: #EBEBEB; text-decoration: none; font-weight: bold; color: #323232; height: 1.3em; } div.left a:hover { border-left: solid 0.5em #AFAFAF; background-color: #DCDCDC; text-decoration: none; color: #323232; } div.left .selected { display: block; border-left: solid 0.5em #990000; border-top: solid 0.1em rgb(200,200,200); background-color: #DCDCDC; font-weight: bold; color: #000000; } div.right { background-color: #00FF00; padding: 0px; margin-left: 50px; margin-right: 50px; } div.footer { margin: 0px 0px 0px 0px; clear: both; color: #323232; } div.footer ul { list-style: none; font-weight: bold; } div.footer li { float: left; white-space: nowrap; } div.footer li a { display: block; background-color: #EBEBEB; border-left: solid 0.5em #EAEAEA; border-right: solid 1px #AFAFAF; text-decoration: none; color: #323232; font-weight: bold; color: #323232; height: 1.3em; } div.footer li a:hover { border-left: solid 0.5em #AFAFAF; border-right: solid 1px #AFAFAF; background-color: #DCDCDC; text-decoration: none; color: #323232; } div.footer li .selected { padding: 0em 0.5em 0em 0.5em; border-right: solid 1px #AFAFAF; background-color: #DCDCDC; color: #323232; } li.fleft { width: 250px; } li.fright { } </style> </head> <body> <div id='header'> <div id='title'> The DCole Server </div> <div id='info'> <form id='search' method='get' action='http://dcole.ath.cx/'><div><input name='DCT' id='dcse_DCTEx' /><input type='submit' value='Search' /></div></form><br /> Welcome Guest | Login | Help<br /><br /> Sunday, July 9, 2006 </div> </div> <div class='left'> <ul> <li class='selected'>Home</li> <li><a href='#'>Settings</a></li> <li><a href='#'>Blog</a></li> <li><a href='#'>Wiki DCole</a></li> <li><a href='#'>Search Engine</a></li> <li><a href='#'>Message Board</a></li> <li><a href='#'>File Manager</a></li> <li><a href='#'>Scripts</a></li> <li><a href='#'>Support Us</a></li> <li><a href='#'>Communities</a><br /></li> </ul> <ul> <li><div id='account'><b> Account Login!</b></div></li> <li> <form action='/ffm/login.php' method='post'> <div> Website:<br /> <input size='20' name='website' type='text' /><br /> Password:<br /> <input size='20' name='password' type='password' /><br /> <input value='Login' type='submit' /> </div> </form> </li> </ul> </div> <div class='right'> body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br /> <div class='footer'> <ul> <li class='fleft'><a href='#'>Updated: 06-25-2006</a></li> <li class='fright'><a href='#'>About Us</a></li> <li class='fright'><a href='#'>Site Map</a></li> <li class='fright'><a href='#'>Terms of Use</a></li> <li class='fright'><a href='#'>Accessibility</a></li> <li class='fright'><a href='#'>Send Feedback</a></li> <li class='fright'><a href='#'>Contact Us</a></li> </ul> </div> </div> </body> </html> Code (markup):
that worked, thanks! I want the update button to be 200px, which it is... then have the other 6 at the bottom go from 250px left to 50px right. How can I do this with an unordered list? I want it to be fexible, so when your at 800X600 the list doesn't start a new row.