I can't get my CSS alignment to work... I want the Left-Menu, Main-Content, and Right-Menu to be on the same row under the Header... The website is at pokereagles.com (please don't post a live link as I dont want SEs to find it yet) My CSS file is at pokereagles.com/css/main.css Thanks Nima
I think you could better use a table. <table> <tr> <td colspan = "3">HEADER</td> </tr> <tr> <td>LEFT</td> <td>CONTENT</td> <td>RIGHT</td> </tr> </table> HTML: You should be able to apply some CSS to make some cool borders
Take a look at this XHTML/CSS layout, and then adapt it to suit your needs. It employs a 100% height model, which means that the footer will "rest" at the bottom of the browser window if there isn't enough content to push it over the edge (or fold, as it's really called). I also suggest you create a temporary image called header.png that is 618px wide by 80px tall then save it (you can change the name of the image if you like, but if you do, just make sure you replace header.png with the name and file type you chose in the stylesheet) just to see what happens . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #FFF; color: #000; } #container { height: 100%; min-height: 100%; margin-bottom: -2em; } html>body #container { height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */ } .skipLink { position: absolute; left: -999em; } #header { background: #00F; color: #FFF; height: 80px; overflow: hidden; position: relative; width: 100%; } h1, h1 span { background: url('/images/header.png') no-repeat; /* this is an image that will replace the default header text */ height: 80px; /* just an example height */ width: 618px; /* just an example width */ } h1 span { display: block; margin-bottom: -80px; /* must be the same as the height of the image */ position: relative; z-index: 1; } #header p { position: absolute; top: 2.25em; text-indent: 1.5em; } #main { float: left; margin-right: -200px; /* equal to the width of the #sidebar DIV container */ width: 100%; /* DO NOT CHANGE OR REMOVE */ } #menu { float: left; list-style: none; width: 7em; } #menu li { display: inline; } #menu a { background: #F00; color: #FFF; display: block; text-decoration: none; text-indent: 0.5em; width: 100%; } #menu a:hover { background: #FF0; color: #000; } #content { height: 1%; margin: 0 200px 0 7em; /* right margin is equal to the width of the sidebar, left margin is equal to the width of the menu */ } #content h2 { text-align: center; } #content .section { padding: 0.5em 0; } #content h3 { padding-left: 0.5em; } #content p { padding: 0.25em 0.5em; } #sidebar { background: #999; color: #FFF; float: right; width: 200px; } #sidebar h2, #sidebar h3 { text-align: center; } #sidebar .section { padding: 0 0.25em; } #sidebar p { padding: 0 0.5em; } #clearFooter { /* needed to make room for the footer */ clear: both; height: 2em; } #footer { background: #FCF; clear: both; color: #333; height: 2em; position: relative; } #footer p { padding-top: 0.45em; text-align: center; } --> </style> <!--[if lt IE 7]> <style type="text/css" media="screen"> /* THE FOLLOWING ARE REQUIRED TO FIX THE INFAMOUS 3 PIXEL JOG */ #menu { margin-right: -3px; } #content { margin-left: -3px; } </style> <![endif]--> </head> <body> <div id="container"> <div id="header"> <h1><span></span>Level 1 Header</h1> <p> Tag Line </p> </div> <div id="main"> <strong class="skipLink">Main Menu <a href="#content">(Skip to Content)</a></strong> <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> <div id="content"> <h2>Page Title</h2> <div class="section"> <h3>Section Header</h3> <p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p> </div> <div class="section"> <h3>Section Header</h3> <p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p> </div> </div> </div> <div id="sidebar"> <h2>Sidebar Title</h2> <div class="section"> <h3>Section Header</h3> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </div> <div class="section"> <h3>Section Header</h3> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </div> </div> <div id="clearFooter"> <!-- this empty DIV is required to "clear the footer" to allow it to rest at the bottom of the brower window if there isn't enough content to push it over the fold --> </div> </div> <div id="footer"> <p> Copyright © 2006, The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </div> </body> </html> HTML:
I am redesigning my website so that it is with DIV... As for the alignment, I want the Left Menu, Main Content, and Right Menu to be on the same row, but inside a Wrapper <DIV>. And I want the whole thing be centered in the browser... I've looked at many codes, can anyone please take a look at my code and tell me what my mistake is... I can't figure it out myself. Thanks
well, how to put them on one row should be something with (text-)align, I'm not sure though. And centering is done with margin-left: auto margin-right: auto Code (markup): Both sides auto makes it be the same, so it will center. Although I heared it was not supported in some browser??
Thanks, I already know that and as far as I know I've implemented it in my code... But it's not working and I don't know what my mistake is... So please reply only if you have time to take a quick look at my code and find my mistake... Thanks