We would like to know how to fix footer to match width of layout.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body #pagePlaceHolderOuter {<!-- ww w. j ava 2 s .c o m-->
background: none no-repeat scroll center bottom/100% auto #FFFFFF;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner {
background: none repeat scroll 0 0 yellow;
height: 100%;
margin: 0 auto;
max-width: 1000px;
min-width: 700px;
width: 70%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
background: gray;
position: fixed;
height: 20%;
bottom: 0;
margin: 0 auto;
width: 70%;
min-width: 700px
}
</style>
</head>
<body>
<body>
<div id="pagePlaceHolderOuter">
<div id="pagePlaceHolderInner">
<h1>Hi guys!</h1>
<div class="footer"></div>
</div>
</div>
</body>
</body>
</html>
The code above is rendered as follows: