I'm working on designing a semi-complicated menu system for http://www.adozentrees.com/beta, and as you can see, there's a problem with the lists aligning under their respective header. It should look like this: http://www.adozentrees.com/beta/12t-bar.jpg . I suspect it has to do with the floats, but I've tried just about everything I can think of and have had no luck. Any thoughts? Thanks for the help!
Get all the main pieces in place before you start tricking things up. The page should work without style sheets and/or images before you write your first style rule. I've written a small test case. Compare to your version with style sheets and images disabled. Strictly speaking, the #nav div should be the top level ul. Doing it as I did is not better, but it is more lucid. <!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"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" /> <title>A Dozen Trees</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*<![CDATA[*/ body { margin:0; padding:0; font: 75% Helvetica, Arial, san-serif; color: #000; background-color: #fff; } #container { margin:30px auto; width: 765px; overflow: hidden; } a img { border: none; } p { font-size: 1em; } #banner { overflow: hidden; display: inline-block; /*set hasLayout in IE*/ } #banner { display: block; /*reset display*/ } #banner h1 { float: left; margin: 0; width: 240px; } #banner ul { margin: 0; padding: 0; list-style: none; } #nav { margin-top: 30px; /*arbitrary value-allowance for bg image*/ overflow: hidden; display: inline-block; /*set hasLayout*/ text-align: right; } #nav { display: block; /*reset display*/ } #nav h2 { font-size: 1.2em; } #nav ul { float: left; width: 24.9%; } /*]]>*/ </style> </head> <body> <div id="container"> <div id="banner"> <h1 id="logo"><a href= "http://www.adozentrees.com/beta/index.htm" title="Back to the A Dozen Trees Homepage"><img id="title" alt="A Dozen Trees" src="test_files/logo.gif" height="160" width="240" /></a></h1> <div id="nav"> <ul> <li> <h2>Investment Fund</h2> </li> <li><a href= "http://www.adozentrees.com/beta/goals.htm">Goals of the Fund</a></li> <li><a href= "http://www.adozentrees.com/beta/howitworks.htm">How it Works</a></li> </ul> <ul> <li> <h2>Network</h2> </li> <li><a href= "http://www.adozentrees.com/beta/aboutnetwork.htm">About the Network</a></li> </ul> <ul> <li> <h2>Think Tank</h2> </li> </ul> <ul> <li> <h2>Company</h2> </li> </ul> </div><!-- end nav --> </div><!-- end banner --> </div><!-- end container --> </body> </html> Code (markup): cheers, gary