No replies
Davehalo1
Davehalo1's picture
Offline
Regular
Leeds
Last seen: 5 years 25 weeks ago
Leeds
Timezone: GMT+1
Joined: 2007-11-19
Posts: 12
Points: 12

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;
}