I've been experimenting with different approaches, but I'm struggling to find a solution for making the footer stay at the bottom of the page. The challenge arises from having multiple nested divs within each other. My goal is to have the border-right and border-left wrappers extend to the bottom of the page to encompass the footer, while keeping the footer positioned at the bottom of the page.
To provide some context on the nested divs: the body has a primary tiled background image, and the #background div has a transparent overlay that fades out towards the edges. The border-right and border-left divs use a repeating image as a background to create borders for the content div.
Now, the footer div should be completely independent, but when I try to separate it, it ends up being centered based on the window width rather than the width of the border-left, leading to a distorted appearance when the screen size is reduced.
The basic structure of the page is outlined below, and I have also included a link to a jsfiddle for reference: http://jsfiddle.net/cutcopypaste/zry4T/
<body>
<div id="background">
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="menu">
<p>Menu</p>
</div>
</div>
<div id="border-left">
<div id="border-right">
<div id="content">
<p>Page Content</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>