Tue, 2014-06-10 11:43
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; }