2 Column HTML5 Layout Issues

2 replies [Last post]

Tue, 2014-06-10 12:29

Davehalo1

Offline

Regular

Leeds

Last seen: 8 years 2 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;
}

Tags:

CSS Layouts

Tue, 2014-06-10 17:22

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 17 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

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.

Tue, 2014-06-17 19:29

Davehalo1

Offline

Regular

Leeds

Last seen: 8 years 2 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.

2 Column HTML5 Layout Issues

Way overthought

Hi Gary, Thank you for the

User login

Navigation