Does anyone know where I can find a good css example that follows best practices for an html layout that works in both firefox, IE. I am looking to build a simple page consisting of a content, header (menu nav below) and footer. I want the content to come first in the html then the header, etc.. Everything I find has multiple columns or the page is a little too old so I am not sure if it's right for how css works today. Yes, my css skills really stink.
You can try this simple, minimal and semantic CSS layout, made by me First, the index.html (or index.php etc): <!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 profile="http://gmpg.org/xfn/11"> <title>Your Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>H1 Heading</h1> </div><!-- close header --> <div id="navigation"> <ul> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> </ul> </div><!-- close navigation --> <div id="main"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div><!-- close main --> <div id="footer"> <p>Copyright © 2008 Your Name. All rights reserved.</p> </div><!-- close footer --> </div><!-- close wrapper --> </body> </html> Code (markup): And stylesheet (style.css): /* Basic =================================== */ * { margin:0; padding:0; } body { background:#fff; color:#000; } #wrapper { width:780px; margin:0 auto; } /* Header =================================== */ #header { padding:10px; text-align:center; border-bottom:1px solid #000; } /* Navigation =================================== */ #navigation { padding:10px; text-align:center; border-bottom:1px solid #000; } #navigation li { display:inline; list-style:none; padding:0 20px; } /* Main =================================== */ #main { padding:10px; } /* Footer =================================== */ #footer { width:100%; padding:10px 0; text-align:center; border-top:1px solid #000; } Code (markup):