Sticky footer

[AEM151]

Hi everyone,

I’m trying to make the footer sticky at the following url:

http://example.com/test/

I’ve tried to adapt some styles that I used on a previous site with a sticky footer (see below) but I can’t seem to get it to work.

I wondered if someone would mind taking a look at the page at the above url to see where I might have gone wrong. The css file is at:

http://example.com/test/css/screen.css

Really appreciate any advice.

html, body {
    height:100%;
}
html, body {
    margin:0;
    padding:0
}
#outerWrapper {
    min-height:100%;
    margin-top:-492px;/* header and footer height*/
}
* html #outerWrapper {
    height:100%;
}
#fullWidthFooter {
    width:100%;
    clear:both;
    height: 140px;
}
#clearfooter {
    clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* - negate effect of float*/
}
#outerWrapper:after {/* instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

[RyanReese]

Hi, the negative top margin on the wrapper should be the footer height. Not the heights combined.

The wrapper should have the min-height:100% and the negative top margin that equals the header and footer height. I mean, the header height and the footer height should be teh same. Aka 140px (for example). The wrapper wouild get -140px top margin.

The header element (or whatever the first element inside the wrapper is) would get a border-top:140px solid transparent; (note that these values all match)

Then the footer has to be 140px height to ensure this works.

Sorry I can’t look at any code.

[AEM151]

Thanks for the reply,

The wrapper should have the min-height:100% and the negative top margin that equals the header and footer height. I mean, the header height and the footer height should be teh same. Aka 140px (for example). The wrapper wouild get -140px top margin.

My header is 352px and my footer is 140px so how can I get this to work if they’re not the same.

the negative top margin on the wrapper should be the footer height. Not the heights combined.

If this is the case then I changed this rule so that it equaled the height of the footer as follows but this didn’t work.

#outerWrapper {
min-height:100%;
margin-top:-140px;/footer height/
}

The header element (or whatever the first element inside the wrapper is) would get a border-top:140px solid transparent; (note that these values all match)

The branding div is the first element inside the wrapper so I’ve given this a border top of 140px:

div#branding {
position: relative;
height: 124px;
border-top: 140px solid transparent /* soak up header and footer*/
}

But again this doesn’t take into account the header which is 352px.

Any further help appreciated.

[RyanReese]

If your footer is 140px and your header 352px…Then on the wrapper set a negative 140px top margin and set a border-top:140px solid transparent on the header element (or first child olf wrapper)

[AEM151]

@RyanReese

If your footer is 140px and your header 352px…Then on the wrapper set a negative 140px top margin and set a border-top:140px solid transparent on the header element (or first child olf wrapper)

Ok I revised the ccs according to your suggestion as follows:

@import url("reset.css");

html, body {
    height:100%; /* for sticky footer*/
}

body {
  background-color: #fff;
  color: #00274c;
  font: 75%/1.3 Arial, Helvetica, sans-serif; 
  text-align: center;
  position: relative;
  min-width: 1000px;
}


/*Opera Fix*/
body:before {/* for sticky footer*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* - negate effect of float*/
}
#outerWrapper:after {/* for sticky footer – instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

* html #outerWrapper {
    height:100%; /* for sticky footer */
}


div#fullWidthHeader {
  background: url(../images/pattern.gif) repeat;
  height: 352px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

div#tile_trans {
  width: 100%;
  height: 352px;
  background: url(../images/tile_trans.png) repeat;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

div#inner {
  width: 100%;
  height: 49px;
  background: url(../images/pattern_tile_top.png) repeat-x;
}


div#outerWrapper {
  min-height:100%; /* for sticky footer*/
  margin-top:-140px;/* for sticky footer*/
  background-color: transparent;
  margin: 0 auto 0;
  text-align: left;
  width: 900px;
  /*min-height: 476px;*/
  position: relative;
  z-index: 3;
  overflow: auto;
}


/*h2, h3, h4, p, ul, { 
margin : 0 20px .75em; }
*/
h2, h3,  h4 { 
font-weight : bold; 
}

h3{ 
font-weight : normal; 
}

strong {
	font-weight: bold;	
}

p { 
font-size : 100%; 
padding-bottom: 10px;
}


/*---------------------Links---------------------*/

a {
color: #00274c;
text-decoration: none;
}

a:visited {
color: #00274c;
}

a:focus, a:hover, a:active { 
color: #ded5b3;
}


ul#nav_bar a:link, ul#nav_bar a:visited {
color: #ded5b3; 
} 

ul#nav_bar a:hover {
color: #fff; 
} 


div#nav_sub ul#nav_bar a:hover {
color: #fff; 
} 



/*---------------------Branding---------------------*/

div#branding {
	position: relative;
	height: 124px;
	border-top: 140px solid transparent; /* for sticky footer*/
}


div#branding h1 {
	width: 224px;
	height: 114px;
	background: url(../images/kc_logo.png) no-repeat left bottom;
	margin-bottom: 10px;
}

div#branding h1 a {
	display: block;
	width: 224px;
	height: 124px;
	text-indent: -9999px;
	/*outline: none;*/
}


/*---------------------Main Navigation---------------------*/


div#nav_main {
position: absolute;
top: 89px;
/*left: 368px;*/
left: 260px;
bottom: 0;
right: 0;
background: url(../images/nav_grad.jpg) repeat-x 0 0;
}

ul#nav_bar {
padding-left: 20px;
}

ul#nav_bar li {
display: inline;
width: auto;
list-style: none;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #fff;
font-weight: bold;
text-align: center;
}


ul#nav_bar a {
line-height: 35px;
font-weight: normal;
color: #00274C;
text-decoration: none;
}


ul#nav_bar li.last {
border-right: 0;
}


div#nav_main h2 {
position: absolute;
top: -9999px;
}


/*---------------------Sub Navigation---------------------*/

div#nav_sub {
position: absolute;
top: 8px;
/*left: 368px;*/
left: 570px;
}

/*ul#nav_bar {
padding-left: 20px;
}
*/

div#nav_sub ul#nav_bar li {
display: inline;
width: auto;
list-style: none;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #fff;
font-weight: bold;
text-align: center;
}


div#nav_sub ul#nav_bar a {
line-height: 35px;
font-weight: normal;
color: #00274C;
text-decoration: none;
}


div#nav_sub ul#nav_bar li.last {
border-right: 0;
}


div#nav_sub h2 {
position: absolute;
top: -9999px;
}

/*---------------------Supplementary Navigation---------------------*/

div#nav_supp
{
width:100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

div#nav_supp h4 {
	text-indent: -9999px;
}


div#nav_supp ul li {
	text-indent: -9999px;
}

div#nav_supp li#site_entry a {
	position: absolute;
	left: 0px;
	top: 280px;
	display: block;
	background: url(../images/site_entry_btn.gif) no-repeat top left;
	width: 30px;
	height: 127px;
}

div#nav_supp li#business_site a {
	position: absolute;
	top: 280px;
	right: 0px;
	display: block;
	background: url(../images/consumer_site_btn.gif) no-repeat top left;
	width: 30px;
	height: 127px;
}

div#nav_supp li#consumer_site a {
	position: absolute;
	top: 280px;
	right: 0px;
	display: block;
	background: url(../images/business_site_btn.gif) no-repeat top left;
	width: 30px;
	height: 127px;
}







/*---------------------Content---------------------*/


div#content {
	background-color: rgb(22,50,92);	
	min-height: 476px;
	overflow: auto;
}

div#content_main {
	width: 696px;
	min-height: 436px;
	margin: 20px;
	float: right;
	background-color: #fff;
}


div#sidebar {
	width: 164px;
	min-height: 456px;
	float: left;
	background-color: #00274c;
	background-image:url(../images/sidebar_fade.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	/*background-image: url(../images/pattern.gif);
	background-repeat: repeat;
	background-position: left top;*/
}

div#sidebar h3 {
	height: 40px;
	text-indent: -9999px;
	background: url(../images/sidebar_h3.jpg) no-repeat 0 0;
}


div#sidebar ul#consumer_nav li {
	text-indent: -9999px;
	padding-bottom: 12px;
}


div#sidebar li#formal a {
	display: block;
	background: url(../images/formal_btn-trans.png) no-repeat top center;
	width: 164px;
	height: 53px;
}

div#sidebar li#formal a:hover {
	background-position: center -53px;
	background-image: url(../images/formal_btn-trans.png);
	background-repeat: no-repeat;
}


div#sidebar li#formal {
	padding-top: 10px;
}

div#sidebar li#boys {
	padding-bottom: 12px;
}


div#sidebar li#suits a {
	display: block;
	background: url(../images/suits_btn-trans.png) no-repeat top center;
	width: 164px;
	height: 53px;
}

div#sidebar li#suits a:hover {
	background-position: center -53px;
	background-image: url(../images/suits_btn-trans.png);
	background-repeat: no-repeat;
}


div#sidebar li#leather a {
	display: block;
	background: url(../images/leather_btn-trans.png) no-repeat top center;
	width: 164px;
	height: 53px;
}

div#sidebar li#leather a:hover {
	background-position: center -53px;
	background-image: url(../images/leather_btn-trans.png);
	background-repeat: no-repeat;
}


div#sidebar li#boys a {
	display: block;
	background: url(../images/boys_btn-trans.png) no-repeat top center;
	width: 164px;
	height: 53px;
}

div#sidebar li#boys a:hover {
	background-position: center -53px;
	background-image: url(../images/boys_btn-trans.png);
	background-repeat: no-repeat;
}


div#garment_display {
	width: 664px;
	height: 198px;
	margin: 20px 12px 10px 20px;
	background: url(../images/garment_display.jpg) no-repeat 0 0;
}

div#garment_display h2 {
	text-indent: -9999px;
}


div#flash {
	width: 318px;
	height: 396px;
	margin: 20px;
	float: left;
}



div#info_consumer {
	width: 318px;
	min-height: 396px;
	float: right;
	margin-right: 20px;
	font-size: 12px;
}

div#info_consumer p {
	margin: 0;
	padding: 0;
}

div#info_consumer p#learn {
	paddong-top: 5px;
}



div#info_wrapper_top {
	width: 318px;
	height: 188px;
	margin: 20px 20px 0 0;
}

div#info_wrapper_top p {
	line-height: 14px;
	padding-top: 10px;
}

div#info_wrapper_top div#mtm {
	width: 149px;
	float: left;
}

div#info_wrapper_top div#ready_made {
	width: 149px;
	float: right;
}


div#info_wrapper_top div#mtm h2 {
	height: 100px;
	background: url(../images/mtm_cons_home.jpg) no-repeat 0 0;
	text-indent: -9999px
}

div#info_wrapper_top div#ready_made h2 {
	height: 100px;
	background: url(../images/suits_cons_home.jpg) no-repeat 0 0;
	text-indent: -9999px
}

div#info_wrapper_bottom {
	width: 318px;
	height: 188px;
	margin: 20px 20px 0 0;
}

div#info_wrapper_bottom p {
	line-height: 14px;
	padding-top: 10px;
}

div#info_wrapper_bottom div#boys {
	width: 149px;
	float: left;
}

div#info_wrapper_bottom div#formal {
	width: 149px;
	float: right;
}


div#info_wrapper_bottom div#boys h2 {
	height: 100px;
	background: url(../images/boys_cons_home.jpg) no-repeat 0 0;
	text-indent: -9999px
}

div#info_wrapper_bottom div#formal h2 {
	height: 100px;
	background: url(../images/formal_cons_home.jpg) no-repeat 0 0;
	text-indent: -9999px
}




/*---------------------Hours of Opening---------------------*/


div#tablewrap {
	width: 400px;
	height: 210px;
	font-size: 13px;
	background-color: #10284b;
	padding-top: 45px;
}

div#tablewrap table {
	width: 300px;
	font-size: 11px;
	color: #fff;
	margin: 0 auto;
}

div#tablewrap td,th {
	border: 1px solid #fff;
	background-color: rgba(22,50,92,0.9);
}


div#tablewrap table td {
	width: 50%;	
	text-align: center;
	padding: 7px 0;
}

div#tablewrap table th {
	text-align: center;
	padding: 7px 0;
	font-weight: bold;
}


div#tablewrap table{border-collapse:separate}

div#tablewrap th{
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    padding:10px;
}


/*--------------Newsletter Form ----------------------*/

div#newsletter {
	font-size: 11px;
	line-height: 12px;
	color: #fff;
	width: 144px;
	padding: 0 10px 0;
}

div#newsletter input {
height: 15px;
margin-bottom: 10px;
}

div#newsletter input#fullname {
height: 15px;
}


div#newsletter label {
position: absolute;
left: -9999px;
}



/*---------------------Footer/Site_info---------------------*/


#siteinfo {
  height: 20px;
  color: #00274c;
  margin-top: 10px;
}


#fullWidthFooter {
  width:100%; /*for sticky footer */
  clear:both; /*for sticky footer */
  background: url(../images/pattern.gif) repeat;
  height: 140px;/* + for sticky footer */
  color: #fff;
  margin-top: 20px;
}

#fullWidthFooter_inner {
  width: 100%;
  height: 140px; 
  background: url(../images/tile_trans_footer.png) repeat-x;
  color: #00274c;
}


#fullWidthFooter_inner p {
	width: 900px;
	margin: 0 auto 0;
	text-align: left;
}


#clearfooter {
    clear:both; /*for sticky footer */
}

The footer becomes sticky but the top right navigation is now positioned incorrectly and the outerWrapper div and it’s contents have all moved down the page. With the sticky footer in place it looks like this:

http://example.com/test/test2.php

Whereas it needs to look like this (but with the sticky footer):

http://example.com/test/

Also the outerWrapper div originally had a min-height of 476px just for other layout purposes but now that I need the sticky footer which needs to have a min-height of 100%, I needed to comment this line out, but really need to have it in, so I don’t know what the workaround would be.

Can you point out some suggestions?

[PaulOB]

Hi,

This is quite complicated with all the absolute positioning and all the overlays you have in there.

This is the code that will work but I’ve made multiple changes so it may be hard to follow.

I put the header back into the flow an used a bigger top margin on the outer wrapper. Then adjusted the absolute elements to match. I used padding top instead of a transparent border because you didn’t want to rub out the header as you still needed some of it to show when overlapped.

I adjusted the margins and dimensions and this is the working code tested in ie7 and firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled</title>
<link href="css/screen2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* Normalizes margin, padding */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
    margin : 0;
    padding : 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
    font-size : 100&#37;;
}
/* Removes list-style from lists */
ol, ul {
    list-style : none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
    font-style : normal;
    font-weight : normal;
}
/* Removes list-style from lists */
table {
    border-collapse : collapse;
    border-spacing : 0;
}
/* Removes border from fieldset and img */
fieldset, img {
    border : 0;
}
/* Left-aligns text in caption and th */
caption, th {
    text-align : left;
}
/* Removes quotation marks from q */
q:before, q:after {
    content :'';
}
html, body {
    height:100%; /* for sticky footer*/
}
body {
    background-color: #fff;
    color: #00274c;
    font: 75%/1.3 Arial, Helvetica, sans-serif;
    text-align: center;
    position: relative;
}
html {
    min-width: 1000px
}
/*Opera Fix*/
body:before {/* for sticky footer*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* - negate effect of float*/
}
#outerWrapper:after {/* for sticky footer &#150; instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
div#fullWidthHeader {
    background: url(http://example.com/test/images/pattern.gif) repeat;
    height: 352px;
    position: relative;
    right: 0;
    z-index:1;
}
div#tile_trans {
    width: 100%;
    height: 352px;
    background: url(http://example.com/test/images/tile_trans.png) repeat;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
div#inner {
    width: 100%;
    height: 49px;
    background: url(http://example.com/test/images/pattern_tile_top.png) repeat-x;
}
div#outerWrapper {
    min-height:100%; /* for sticky footer*/
    background-color: transparent;
    margin: 0 auto 0;
    margin-top:-492px;/* for sticky footer*/
    text-align: left;
    width: 900px;
    /*min-height: 476px;*/
  position: relative;
    z-index: 3;
}
* html #outerWrapper {
    height:100%; /* for sticky footer */
}
/*h2, h3, h4, p, ul, { 
margin : 0 20px .75em; }
*/
h2, h3, h4 {
    font-weight : bold;
}
h3 {
    font-weight : normal;
}
strong {
    font-weight: bold;
}
p {
    font-size : 100%;
    padding-bottom: 10px;
}
/*---------------------Links---------------------*/

a {
    color: #00274c;
    text-decoration: none;
}
a:visited {
    color: #00274c;
}
a:focus, a:hover, a:active {
    color: #ded5b3;
}
ul#nav_bar a:link, ul#nav_bar a:visited {
    color: #ded5b3;
}
ul#nav_bar a:hover {
    color: #fff;
}
div#nav_sub ul#nav_bar a:hover {
    color: #fff;
}
/*---------------------Branding---------------------*/

div#branding {
    position: relative;
    height: 124px;
    padding-top: 160px; /* for sticky footer*/
}
div#branding h1 {
    width: 224px;
    height: 114px;
    background: url(http://example.com/test/images/kc_logo.png) no-repeat left bottom;
    margin-bottom: 10px;
}
div#branding h1 a {
    display: block;
    width: 224px;
    height: 124px;
    text-indent: -9999px;/*outline: none;*/
}
/*---------------------Main Navigation---------------------*/


div#nav_main {
    position: absolute;
    top: 250px;
    /*left: 368px;*/
left: 260px;
    bottom: 0;
    right: 0;
    background: url(http://example.com/test/images/nav_grad.jpg) repeat-x 0 0;
    z-index:99
}
ul#nav_bar {
    padding-left: 20px;
}
ul#nav_bar li {
    display: inline;
    width: auto;
    list-style: none;
    margin-right: 0.5em;
    padding-right: 0.75em;
    border-right: 1px solid #fff;
    font-weight: bold;
    text-align: center;
}
ul#nav_bar a {
    line-height: 35px;
    font-weight: normal;
    color: #00274C;
    text-decoration: none;
}
ul#nav_bar li.last {
    border-right: 0;
}
div#nav_main h2 {
    position: absolute;
    top: -9999px;
}
/*---------------------Sub Navigation---------------------*/

div#nav_sub {
    position: absolute;
    top: 150px;
    /*left: 368px;*/
left: 570px;
    z-index:99;
}
/*ul#nav_bar {
padding-left: 20px;
}
*/

div#nav_sub ul#nav_bar li {
    display: inline;
    width: auto;
    list-style: none;
    margin-right: 0.5em;
    padding-right: 0.75em;
    border-right: 1px solid #fff;
    font-weight: bold;
    text-align: center;
}
div#nav_sub ul#nav_bar a {
    line-height: 35px;
    font-weight: normal;
    color: #00274C;
    text-decoration: none;
}
div#nav_sub ul#nav_bar li.last {
    border-right: 0;
}
div#nav_sub h2 {
    position: absolute;
    top: -9999px;
}
/*---------------------Supplementary Navigation---------------------*/

div#nav_supp {
    width:100%;
    position: realative;
    z-index:99;
}
div#nav_supp h4 {
    text-indent: -9999px;
}
div#nav_supp ul li {
    text-indent: -9999px;
}
div#nav_supp li#site_entry a {
    position: absolute;
    left: 0px;
    top: 280px;
    display: block;
    background: url(http://example.com/test/images/site_entry_btn.gif) no-repeat top left;
    width: 30px;
    height: 127px;
}
div#nav_supp li#business_site a {
    position: absolute;
    top: 280px;
    right: 0px;
    display: block;
    background: url(http://example.com/test/images/consumer_site_btn.gif) no-repeat top left;
    width: 30px;
    height: 127px;
}
div#nav_supp li#consumer_site a {
    position: absolute;
    top: 280px;
    right: 0px;
    display: block;
    background: url(http://example.com/test/images/business_site_btn.gif) no-repeat top left;
    width: 30px;
    height: 127px;
}
/*---------------------Content---------------------*/


div#content {
    background-color: rgb(22,50,92);
    min-height: 476px;
    overflow: auto;
}
div#content_main {
    width: 696px;
    min-height: 436px;
    margin: 20px;
    float: right;
    background-color: #fff;
}
div#sidebar {
    width: 164px;
    min-height: 456px;
    float: left;
    background-color: #00274c;
    background-image:url(http://example.com/test/images/sidebar_fade.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;/*background-image: url(http://example.com/test/images/pattern.gif);
    background-repeat: repeat;
    background-position: left top;*/
}
div#sidebar h3 {
    height: 40px;
    text-indent: -9999px;
    background: url(http://example.com/test/images/sidebar_h3.jpg) no-repeat 0 0;
}
div#sidebar ul#consumer_nav li {
    text-indent: -9999px;
    padding-bottom: 12px;
}
div#sidebar li#formal a {
    display: block;
    background: url(http://example.com/test/images/formal_btn-trans.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#formal a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/formal_btn-trans.png);
    background-repeat: no-repeat;
}
div#sidebar li#formal {
    padding-top: 10px;
}
div#sidebar li#boys {
    padding-bottom: 12px;
}
div#sidebar li#suits a {
    display: block;
    background: url(http://example.com/test/images/suits_btn-trans.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#suits a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/suits_btn-trans.png);
    background-repeat: no-repeat;
}
div#sidebar li#leather a {
    display: block;
    background: url(http://example.com/test/images/leather_btn-trans.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#leather a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/leather_btn-trans.png);
    background-repeat: no-repeat;
}
div#sidebar li#boys a {
    display: block;
    background: url(http://example.com/test/images/boys_btn-trans.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#boys a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/boys_btn-trans.png);
    background-repeat: no-repeat;
}
div#garment_display {
    width: 664px;
    height: 198px;
    margin: 20px 12px 10px 20px;
    background: url(http://example.com/test/images/garment_display.jpg) no-repeat 0 0;
}
div#garment_display h2 {
    text-indent: -9999px;
}
div#flash {
    width: 318px;
    height: 396px;
    margin: 20px;
    float: left;
}
div#info_consumer {
    width: 318px;
    min-height: 396px;
    float: right;
    margin-right: 20px;
    font-size: 12px;
}
div#info_consumer p {
    margin: 0;
    padding: 0;
}
div#info_consumer p#learn {
    paddong-top: 5px;
}
div#info_wrapper_top {
    width: 318px;
    height: 188px;
    margin: 20px 20px 0 0;
}
div#info_wrapper_top p {
    line-height: 14px;
    padding-top: 10px;
}
div#info_wrapper_top div#mtm {
    width: 149px;
    float: left;
}
div#info_wrapper_top div#ready_made {
    width: 149px;
    float: right;
}
div#info_wrapper_top div#mtm h2 {
    height: 100px;
    background: url(http://example.com/test/images/mtm_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
div#info_wrapper_top div#ready_made h2 {
    height: 100px;
    background: url(http://example.com/test/images/suits_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
div#info_wrapper_bottom {
    width: 318px;
    height: 188px;
    margin: 20px 20px 0 0;
}
div#info_wrapper_bottom p {
    line-height: 14px;
    padding-top: 10px;
}
div#info_wrapper_bottom div#boys {
    width: 149px;
    float: left;
}
div#info_wrapper_bottom div#formal {
    width: 149px;
    float: right;
}
div#info_wrapper_bottom div#boys h2 {
    height: 100px;
    background: url(http://example.com/test/images/boys_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
div#info_wrapper_bottom div#formal h2 {
    height: 100px;
    background: url(http://example.com/test/images/formal_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
/*---------------------Hours of Opening---------------------*/


div#tablewrap {
    width: 400px;
    height: 210px;
    font-size: 13px;
    background-color: #10284b;
    padding-top: 45px;
}
div#tablewrap table {
    width: 300px;
    font-size: 11px;
    color: #fff;
    margin: 0 auto;
}
div#tablewrap td, th {
    border: 1px solid #fff;
    background-color: rgba(22, 50, 92, 0.9);
}
div#tablewrap table td {
    width: 50%;
    text-align: center;
    padding: 7px 0;
}
div#tablewrap table th {
    text-align: center;
    padding: 7px 0;
    font-weight: bold;
}
div#tablewrap table {
    border-collapse:separate
}
div#tablewrap th {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    padding:10px;
}
/*--------------Newsletter Form ----------------------*/

div#newsletter {
    font-size: 11px;
    line-height: 12px;
    color: #fff;
    width: 144px;
    padding: 0 10px 0;
}
div#newsletter input {
    height: 15px;
    margin-bottom: 10px;
}
div#newsletter input#fullname {
    height: 15px;
}
div#newsletter label {
    position: absolute;
    left: -9999px;
}
/*---------------------Footer/Site_info---------------------*/


#siteinfo {
    height: 20px;
    color: #00274c;
    margin-top: 10px;
    clear:both;
}
#fullWidthFooter {
    width:100%; /*for sticky footer */
    clear:both; /*for sticky footer */
    background: url(http://example.com/test/images/pattern.gif) repeat 0 0;
    height: 140px;/* + for sticky footer */
    color: #fff;
}
#fullWidthFooter_inner {
    width: 100%;
    height: 140px;
    background: url(http://example.com/test/images/tile_trans_footer.png) repeat 0 0;
    color: #00274c;
}
#fullWidthFooter_inner p {
    width: 900px;
    margin: 0 auto 0;
    text-align: left;
}
.clear {
    clear:both; /*for sticky footer */
}
</style>
<script type="text/javaScript" src="http://example.com/js/curvycorners.src.js"></script>
<script type="text/javascript" src="swf/swfobject.js"></script>
<script type="text/javascript">
            var flashvars = {};
            var params = {};
            var attributes = {};
            swfobject.embedSWF("swf/consumer_gallery.swf", "garment_display_cons", "318", "396", "6.0.0", false, flashvars, params, attributes);
        </script>
<style type="text/css">
div.round {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    CCborderRadius: 10px;
}
h3.round2, div#content {
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
}
</style>
</head>
<body>
<div id="fullWidthHeader">
    <div id="tile_trans">
        <div id="inner"> </div>
    </div>
    <div id="nav_supp">
        <h4>Supplementary navigation</h4>
        <ul id="nav_supp">
            <li id="site_entry"><a href="../index.php">Site entry</a></li>
            <li id="consumer_site"><a href="../business/index.php">Consumer site</a></li>
        </ul>
    </div>
</div>
<div id="outerWrapper">
    <div id="branding">
        <h1><a href="index.php">Site</a></h1>
        <div id="nav_main" class="round">
            <h2>Main navigation</h2>
            <ul id="nav_bar">
                <li ><a href="#">Link 1</a></li>
                <li ><a href="#">Link 2</a></li>
                <li ><a href="#">Link 3</a></li>
                <li ><a href="#">Link 4</a></li>
                <li ><a href="#">Link 5</a></li>
                <li ><a href="#">Link 6</a></li>
                <li id class="last"><a href="#">Link 7</a></li>
            </ul>
        </div>
        <div id="nav_sub">
            <h2>Sub navigation</h2>
            <ul id="nav_bar">
                <li id="contact"><a href="#">Contact us</a></li>
                <li id="map"><a href="#">Location map</a></li>
                <li id="hours" class="last"><a href="#">Store opening hours</a></li>
            </ul>
        </div>
    </div>
    <div id="content">
        <div id="content_main">
            <div id="flash">
                <div id="garment_display_cons"> <img src="http://example.com/images/consumer_flash_static.jpg" width="318" height="396" alt="" /> </div>
            </div>
            <div id="info_consumer">
                <div id="info_wrapper_top">
                    <div id="mtm">
                        <h2>Subject 1</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="#">Learn more...</a></p>
                    </div>
                    <div id="ready_made">
                        <h2>Subject 2</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="#">Learn more...</a></p>
                    </div>
                </div>
                <div id="info_wrapper_bottom">
                    <div id="boys">
                        <h2>Subject 3</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="#">Learn more...</a></p>
                    </div>
                    <div id="formal">
                        <h2>Subject 4</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="#">Learn more...</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div id="sidebar">
            <h3 class="round2"></h3>
        </div>
        <div class="clear"></div>
    </div>
    <div id="siteinfo">
        <p>&copy;2010. All rights reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms and Conditions</a> | <a href="#">Ordering</a> | <a href="#">Shipping</a> | <a href="#">Returns</a></p>
    </div>
</div>
<div id="fullWidthFooter">
    <div id="fullWidthFooter_inner"> </div>
</div>
</body>
</html>

You will just have to copy that page and run it while online to see how it looks. There were multiple changes so I haven’t listed them but hopefully you will be able to follow.

Hope that helps anyway

[AEM151]

Thanks so much for this,

I’ve revised the code according to your suggestions and the updated file is here:

http://example.com/test/

It’s all working really well with just a couple more issues. The outerWrapper div is positioned just a little bit too far down the page compared to where I had it originally. Can you tell me how to shift this up a bit, ie. which element to adjust?

Also I noticed that even though the footer is now sticky, if I extend the browser window the full height, the scrollbar is showing. There’s only a little bit of scroll area - I mean it’ll only let you scroll down about 10 pixels or something - but I don’t know why it’s there since you’d think if the browser was fully extended it wouldn’t need to be there. This is happening on a larger monitor where there’s quite a lot of space below the site info area, ie. the copyright info etc. The weird thing is that when I tested your code on it’s own this scroll problem didn’t happen - it only occurred once I transferred it into my own layout. Do you know why this could be happening?

One other thing - I noticed that the nav_sub div which is positioned in the top right corner of the layout, has a top position of 132px. As this element is absolutely positioned and is right at the top of the browser window, you’d think that it would only need to be positioned a few pixels down, not 132. Can you clarify this?

Really appreciate any further help.

[PaulOB]

Hi,

It’s mainly a matter of tweaking the negative margins to suit and adjusting the padding buffer. The layout is dragged through the top of the monitor so the absolute positioning has to be offset because the top of the page is now some distance above the top of the monitor.

Changes in bold:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" />
<style>
/* Normalizes margin, padding */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
    margin : 0;
    padding : 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
    font-size : 100&#37;;
}
/* Removes list-style from lists */
ol, ul {
    list-style : none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
    font-style : normal;
    font-weight : normal;
}
/* Removes list-style from lists */
table {
    border-collapse : collapse;
    border-spacing : 0;
}
/* Removes border from fieldset and img */
fieldset, img {
    border : 0;
}
/* Left-aligns text in caption and th */
caption, th {
    text-align : left;
}
/* Removes quotation marks from q */
q:before, q:after {
    content :'';
}
/*---------site colours--------------

beige: #ded5b3;
navy: #00274c

*/
  
html, body {
    height:100%; /* for sticky footer*/
}
body {
    background-color: #fff;
    color: #00274c;
    font: 75%/1.3 Arial, Helvetica, sans-serif;
    text-align: center;
    position: relative;
}
html {
    min-width: 1000px
}
/*Opera Fix*/
body:before {/* for sticky footer*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* - negate effect of float*/
}
#outerWrapper:after {/* for sticky footer &#150; instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
div#fullWidthHeader {
    background: url(http://example.com/test/images/pattern.gif) repeat;
    height: 352px;
    position: relative;
    right: 0;
    z-index:1;
}
div#tile_trans {
    width: 100%;
    height: 352px;
    background: url(http://example.com/test/images/tile_trans.png) repeat;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
div#inner {
    width: 100%;
    height: 49px;
    background: url(http://example.com/test/images/pattern_tile_top.png) repeat-x;
}
div#outerWrapper {
    min-height:100%; /* for sticky footer*/
    background-color: transparent;
    margin: 0 auto 0;
  [B]  margin-top:-508px;/* for sticky footer*/[/B]
    text-align: left;
    width: 900px;
    /*min-height: 476px;*/
  position: relative;
    z-index: 3;
}
* html #outerWrapper {
    height:100%; /* for sticky footer */
}
/*h2, h3, h4, p, ul, { 
margin : 0 20px .75em; }
*/
h2, h3, h4 {
    font-weight : bold;
}
h3 {
    font-weight : normal;
}
strong {
    font-weight: bold;
}
p {
    font-size : 100%;
    padding-bottom: 10px;
}
/*---------------------Links---------------------*/

a {
    color: #00274c;
    text-decoration: none;
}
a:visited {
    color: #00274c;
}
a:focus, a:hover, a:active {
    color: #ded5b3;
}
ul#nav_bar a:link, ul#nav_bar a:visited {
    color: #ded5b3;
}
ul#nav_bar a:hover {
    color: #fff;
}
div#nav_sub ul#nav_bar a:hover {
    color: #fff;
}
/*---------------------Branding---------------------*/

div#branding {
    position: relative;
    height: 124px;
 [B]   padding-top: 140px; /* for sticky footer*/[/B]
}
div#branding h1 {
    width: 224px;
    height: 114px;
    background: url(http://example.com/test/images/kc_logo.png) no-repeat left bottom;
    margin-bottom: 10px;
}
div#branding h1 a {
    display: block;
    width: 224px;
    height: 124px;
    text-indent: -9999px;/*outline: none;*/
}
/*---------------------Main Navigation---------------------*/


div#nav_main {
    position: absolute;
   [B] top: 230px;[/B]
    /*left: 368px;*/
left: 260px;
    bottom: 0;
    right: 0;
    background: url(http://example.com/test/images/nav_grad.jpg) repeat-x 0 0;
    z-index:99
}
ul#nav_bar {
    padding-left: 20px;
}
ul#nav_bar li {
    display: inline;
    width: auto;
    list-style: none;
    margin-right: 0.5em;
    padding-right: 0.75em;
    border-right: 1px solid #fff;
    font-weight: bold;
    text-align: center;
}
ul#nav_bar a {
    line-height: 35px;
    font-weight: normal;
    color: #00274C;
    text-decoration: none;
}
ul#nav_bar li.last {
    border-right: 0;
}
div#nav_main h2 {
    position: absolute;
    top: -9999px;
}
/*---------------------Sub Navigation---------------------*/

div#nav_sub {
    position: absolute;
   [B] top: 146px;[/B]
    /*left: 368px;*/
    left: 570px;
    z-index:99;
}
/*ul#nav_bar {
padding-left: 20px;
}
*/

div#nav_sub ul#nav_bar li {
    display: inline;
    width: auto;
    list-style: none;
    margin-right: 0.5em;
    padding-right: 0.75em;
    border-right: 1px solid #fff;
    font-weight: bold;
    text-align: center;
}
div#nav_sub ul#nav_bar a {
    line-height: 35px;
    font-weight: normal;
    color: #00274C;
    text-decoration: none;
}
div#nav_sub ul#nav_bar li.last {
    border-right: 0;
}
div#nav_sub h2 {
    position: absolute;
    top: -9999px;
}
/*---------------------Supplementary Navigation---------------------*/

div#nav_supp {
    width:100%;
    position: realative;
    z-index:99;
}
div#nav_supp h4 {
    text-indent: -9999px;
}
div#nav_supp ul li {
    text-indent: -9999px;
}
div#nav_supp li#site_entry a {
    position: absolute;
    left: 0px;
   top: 280px;
    display: block;
    background: url(http://example.com/test/images/site_entry_btn.gif) no-repeat top left;
    width: 30px;
    height: 127px;
    z-index:99;
}
div#nav_supp li#business_site a {
    position: absolute;
    top: 280px;
    right: 0px;
    display: block;
    background: url(http://example.com/test/images/consumer_site_btn.gif) no-repeat top left;
    width: 30px;
    height: 127px;
    z-index:99;
}
div#nav_supp li#consumer_site a {
    position: absolute;
    top: 280px;
    right: 0px;
    display: block;
    background: url(http://example.com/test/images/business_site_btn.gif) no-repeat top left;
    width: 30px;
    height: 127px;
    z-index:99;
}
/*---------------------Content---------------------*/


div#content {
    background-color: rgb(22,50,92);
    min-height: 476px;
    overflow: auto;
}
div#content_main {
    width: 696px;
    min-height: 436px;
    margin: 20px;
    float: right;
    background-color: #fff;
}
div#sidebar {
    width: 164px;
    min-height: 456px;
    float: left;
    background-color: #00274c;
    background-image:url(http://example.com/test/images/sidebar_fade.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;/*background-image: url(http://example.com/test/images/pattern.gif);
    background-repeat: repeat;
    background-position: left top;*/
}
div#sidebar h3 {
    height: 40px;
    text-indent: -9999px;
    background: url(http://example.com/test/images/sidebar_h3.jpg) no-repeat 0 0;
}
div#sidebar ul#consumer_nav li {
    text-indent: -9999px;
    padding-bottom: 12px;
}
div#sidebar li#formal a {
    display: block;
    background: url(http://example.com/test/images/formal_btn-trans.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#formal a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/formal_btn-trans.png);
    background-repeat: no-repeat;
}
div#sidebar li#formal {
    padding-top: 10px;
}
div#sidebar li#boys {
    padding-bottom: 12px;
}
div#sidebar li#suits a {
    display: block;
    background: url(http://example.com/test/images/suits_btn-trans.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#suits a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/suits_btn-trans.png);
    background-repeat: no-repeat;
}
div#sidebar li#leather a {
    display: block;
    background: url(http://example.com/test/images/leather_btn-trans.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#leather a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/leather_btn-trans.png);
    background-repeat: no-repeat;
}
div#sidebar li#boys a {
    display: block;
    background: url(http://example.com/test/images/boys_btn-trans.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#boys a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/boys_btn-trans.png);
    background-repeat: no-repeat;
}
div#garment_display {
    width: 664px;
    height: 198px;
    margin: 20px 12px 10px 20px;
    background: url(http://example.com/test/images/garment_display.jpg) no-repeat 0 0;
}
div#garment_display h2 {
    text-indent: -9999px;
}
div#flash {
    width: 318px;
    height: 396px;
    margin: 20px;
    float: left;
}
div#info_consumer {
    width: 318px;
    min-height: 396px;
    float: right;
    margin-right: 20px;
    font-size: 12px;
}
div#info_consumer p {
    margin: 0;
    padding: 0;
}
div#info_consumer p#learn {
    paddong-top: 5px;
}
div#info_wrapper_top {
    width: 318px;
    height: 188px;
    margin: 20px 20px 0 0;
}
div#info_wrapper_top p {
    line-height: 14px;
    padding-top: 10px;
}
div#info_wrapper_top div#mtm {
    width: 149px;
    float: left;
}
div#info_wrapper_top div#ready_made {
    width: 149px;
    float: right;
}
div#info_wrapper_top div#mtm h2 {
    height: 100px;
    background: url(http://example.com/test/images/mtm_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
div#info_wrapper_top div#ready_made h2 {
    height: 100px;
    background: url(http://example.com/test/images/suits_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
div#info_wrapper_bottom {
    width: 318px;
    height: 188px;
    margin: 20px 20px 0 0;
}
div#info_wrapper_bottom p {
    line-height: 14px;
    padding-top: 10px;
}
div#info_wrapper_bottom div#boys {
    width: 149px;
    float: left;
}
div#info_wrapper_bottom div#formal {
    width: 149px;
    float: right;
}
div#info_wrapper_bottom div#boys h2 {
    height: 100px;
    background: url(http://example.com/test/images/boys_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
div#info_wrapper_bottom div#formal h2 {
    height: 100px;
    background: url(http://example.com/test/images/formal_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
/*---------------------Hours of Opening---------------------*/


div#tablewrap {
    width: 400px;
    height: 210px;
    font-size: 13px;
    background-color: #10284b;
    padding-top: 45px;
}
div#tablewrap table {
    width: 300px;
    font-size: 11px;
    color: #fff;
    margin: 0 auto;
}
div#tablewrap td, th {
    border: 1px solid #fff;
    background-color: rgba(22, 50, 92, 0.9);
}
div#tablewrap table td {
    width: 50%;
    text-align: center;
    padding: 7px 0;
}
div#tablewrap table th {
    text-align: center;
    padding: 7px 0;
    font-weight: bold;
}
div#tablewrap table {
    border-collapse:separate
}
div#tablewrap th {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    padding:10px;
}
/*--------------Newsletter Form ----------------------*/

div#newsletter {
    font-size: 11px;
    line-height: 12px;
    color: #fff;
    width: 144px;
    padding: 0 10px 0;
}
div#newsletter input {
    height: 15px;
    margin-bottom: 10px;
}
div#newsletter input#fullname {
    height: 15px;
}
div#newsletter label {
    position: absolute;
    left: -9999px;
}
/*---------------------Footer/Site_info---------------------*/


#siteinfo {
    height: 20px;
    color: #00274c;
    margin-top: 10px;
    clear:both;
}
#fullWidthFooter {
    width:100%; /*for sticky footer */
    clear:both; /*for sticky footer */
    background: url(http://example.com/test/images/pattern.gif) repeat;
    height: 140px;/* + for sticky footer */
    color: #fff;
}
#fullWidthFooter_inner {
    width: 100%;
    height: 140px;
    background: url(http://example.com/test/images/tile_trans_footer.png) repeat-x;
    color: #00274c;
}
#fullWidthFooter_inner p {
    width: 900px;
    margin: 0 auto 0;
    text-align: left;
}
.clear {
    clear:both; /*for sticky footer */
}
</style>
<script type="text/javaScript" src="http://example.com/js/curvycorners.src.js"></script>
<script type="text/javascript" src="swf/swfobject.js"></script>
<script type="text/javascript">
            var flashvars = {};
            var params = {};
            var attributes = {};
            swfobject.embedSWF("swf/consumer_gallery.swf", "garment_display_cons", "318", "396", "6.0.0", false, flashvars, params, attributes);
        </script>
<style type="text/css">
div.round {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    /*    -webkit-box-shadow: 2px 2px 4px #666;
    -moz-box-shadow: 2px 2px 4px #666;*/
    CCborderRadius: 10px;
}
h3.round2, div#content {
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
}
</style>
</head>
<body>
<div id="fullWidthHeader">
    <div id="tile_trans">
        <div id="inner"> </div>
    </div>
    <div id="nav_supp">
        <h4>Supplementary navigation</h4>
        <ul id="nav_supp">
            <li id="site_entry"><a href="#">Site entry</a></li>
            <li id="consumer_site"><a href="#">Consumer site</a></li>
        </ul>
    </div>
</div>
>
<div id="outerWrapper">
    <div id="branding">
        <h1><a href="index.php">Site</a></h1>
        <div id="nav_main" class="round">
            <h2>Main navigation</h2>
            <ul id="nav_bar">
                <li ><a href="#">Link 1</a></li>
                <li ><a href="#">Link 2</a></li>
                <li ><a href="#">Link 3</a></li>
                <li ><a href="#">Link 4</a></li>
                <li ><a href="#">Link 5</a></li>
                <li ><a href="#">Link 6</a></li>
                <li id class="last"><a href="#">Link 7</a></li>
            </ul>
        </div>
        <div id="nav_sub">
            <h2>Sub navigation</h2>
            <ul id="nav_bar">
                <li id="contact"><a href="#">Contact us</a></li>
                <li id="map"><a href="#">Location map</a></li>
                <li id="hours" class="last"><a href="#">Store opening hours</a></li>
            </ul>
        </div>
    </div>
    <div id="content">
        <div id="content_main">
            <div id="flash">
                <div id="garment_display_cons"> <img src="http://example.com/images/consumer_flash_static.jpg" width="318" height="396" alt="" /> </div>
            </div>
            <div id="info_consumer">
                <div id="info_wrapper_top">
                    <div id="mtm">
                        <h2>Subject 1</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="#">Learn more...</a></p>
                    </div>
                    <div id="ready_made">
                        <h2>Subject 2</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="#">Learn more...</a></p>
                    </div>
                </div>
                <div id="info_wrapper_bottom">
                    <div id="boys">
                        <h2>Subject 3</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="#">Learn more...</a></p>
                    </div>
                    <div id="formal">
                        <h2>Subject 4</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="#">Learn more...</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div id="sidebar">
            <h3 class="round2">Apparel Categories</h3>
        </div>
        <div class="clear"></div>
    </div>
    <div id="siteinfo">
        <p>&copy;2010. All rights reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms and Conditions</a> | <a href="#">Ordering</a> | <a href="#">Shipping</a> | <a href="#">Returns</a></p>
    </div>
</div>
<div id="fullWidthFooter">
    <div id="fullWidthFooter_inner"> </div>
</div>
</body>
</html>

[AEM151]

That’s perfect. Thanks again.