CSS Sticky footer with 100% width - css

Question

I'm trying to implement a sticky footer having a 100% of width. It should be stick on the bottom of the page, but not overlapping the page content div.
I'm using the page layout identical to this example:
http://peterned.home.xs4all.nl/examples/csslayout1.html
As you can see, the footer has the same width of div#container.
But I want to stretch the footer up to 100% width, whilst the page content stays centered and keeps stretching in height when resizing the browser.
How can I do that?

Answer 1

try this
click le link to see new result
http://jsfiddle.net/n6u3e/
/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}
#barco{
width:750px;
margin:auto;
}