2 replies [Last post]
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;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 5 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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 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.