Hi guys,
Just started with HTML5 and am working on revamping and old site.
Basically I need a 2 column layout, centred with full browser width divs around each of the 3 main areas - Header, Body and Footer so I can have a colour go full width on the background.
I'm not sure if I'm over complicating it, but I can't get my aside tag to line up along side my section main area.
If anyone could advise that would be great, codes samples are posted below.
Thanks,
Dave.
HTML5 Code -
<!doctype html> <html> <head> <meta charset="utf-8"> <title>html5 test</title> <style type="text/css"> @import url("css/test.css"); </style> </head> <body> <div id="full_width_header"> <header id="top" > <a href="#"><img src="lic_logo.png" alt="" width="248" height="141" class="headerLogo"/></a> <div id="phone"><a href="#" title="Call Leeds Ink Cartridges." class="topphoneNumber">phone number</a></div> <div id="email"><a href="#" title="Email Leeds Ink Cartridges." class="topemail">email address</a></div> <nav id="nav" > <ul id="top_menu"> <li class="nav_border_left"><a class="nav" href="index.html" title="Home">Home</a></li> <li><a class="nav" href="#" title="Leeds Ink Cartridges - Ink">Ink</a></li> <li><a class="nav" href="#" title="Leeds Ink Cartridges - Toner">Toner</a></li> <li><a class="nav" href="#" title="Leeds Ink Cartridges - Printers">Printers</a></li> <li><a class="nav" href="#" title="Leeds Ink Cartridges - Brands">Brands</a></li> <li><a class="nav" href="#" title="Delivery">Delivery</a></li> <li><a class="nav" href="#" title="Contact Us">Contact Us</a></li> </ul> </nav> </header> </div> <div id="full_width_main"> <section id="sectionMain"> <p>some content</p> </section> <aside id="sideBar"><p>some content</p></aside> </div> <div id="full_width_footer"> <footer id="bottom"> </footer> </div> </body> </html>
CSS Code -
@charset "utf-8"; body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #007A8B; } #full_width_top { width: 100%; background-color: #009AFF; /* [disabled]display: inline; */ clear: both; border-bottom: 5px solid #003BA3; } #top { background-color: #FFFFFF; width: 960px; margin-right: auto; margin-left: auto; height: 160px; padding-left: 10px; padding-right: 10px; } #contact_top { width: 980px; margin-right: auto; margin-left: auto; display: block; height: 40px; } a.topphoneNumber:active, a.topphoneNumber:hover, a.topphoneNumber:visited, a.topphoneNumber:link { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; color: #007A8B; font-weight: bold; float: left; letter-spacing: 1px; text-decoration: none; cursor: default; padding-left: 70px; text-align: left; } a.topemail:active, a.topemail:visited, a.topemail:link { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-weight: bold; color: #007A8B; text-decoration: none; letter-spacing: 1px; text-align: right; } a.topemail:hover { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-weight: bold; color: #007A8B; text-decoration: underline; letter-spacing: 1px; } #full_width_header { width: 100%; background-color: #007A8B; margin-top: 10px; } #header { width: 980px; margin-right: auto; margin-left: auto; height: 200px; display: block; } #full_width_main { background-color: #007A8B; width: 100%; } #main { width: 960px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; } #sectionMain { width: 600px; background-color: #FFFFFF; height: 400px; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; } #full_width_footer { width: 100%; color: #156093; background-color: #007A8B; margin-bottom: 10px; } #bottom { height: 200px; background-color: #0097FF; width: 980px; margin-right: auto; margin-left: auto; color: #007A8B; border-top: 5px solid #004953; } #email { width: 462px; float: left; background-color: #FFFFFF; height: 34px; text-align: right; color: #007A8B; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; padding-top: 6px; } #phone { width: 250px; float: left; background-color: #FFFFFF; height: 34px; padding-top: 6px; color: #007A8B; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; } .headerLogo { margin-top: 10px; clear: left; float: left; } #nav { height: 40px; background-color: #FFF; width: 712px; float: left; padding-top: 28px; } #top_menu { list-style: none; text-align: center; float: right; } #top_menu li { width: 90px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; float: left; color: #024d5e; border-right: 1px solid #007A8B; } .nav_border_left { margin-left: 16px; border-left: 1px solid #007A8B; } a.nav { font-family: Arial, Helvetica, sans-serif; color: #007A8B; text-decoration: none; } a.nav:hover { font-family: Arial, Helvetica, sans-serif; color: #007A8B; text-decoration: underline; } h1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 20px; font-style: normal; font-weight: bold; color: #024D5E; text-align: left; } p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; color: #024D5E; text-align: left; } #sideBar { width: 300px; height: 400px; float: right; clear: left; }
Way overthought
Block elements, aside from a few special cases, automagically run the full width of their containers. Avoid setting widths except on those special situations.
Wrap the whole document in a div with a % width plus max and min widths to limit the dimensions, and give it auto margins to center it. The children of the wrapper will then adjust their own sizes to fit.
cheers,
gary
Hi Gary, Thank you for the
Hi Gary,
Thank you for the response.
I will have a look at you method and see how I get on.
Kind regards,
Dave.