Forum Moderators: not2easy
My goal is to have a page with centered content in a fixed width style but have that content always "attached" to the bottom of the browser window no matter what resolution the viewer has set.
Here's how I'm currently doing it:
I have a div container with a table inside that - that has 1 row and 3 cells. Far left and right cells contain images as framing and the middle cell contains additional divs for header, footer, and navigation with a table in the middle for content. Here's the current css:
html, body {
height:100%
}
BODY {
background: #7d0606 url('an image') repeat-x bottom;
margin: 0px;
padding: 0px;
}
#containerDiv {
min-height:100%;
/*position:absolute;
bottom:0;*/
text-align:center;
}
* html #container {
height: 100%;
}
#themeTable {
margin-left: auto;
margin-right: auto;
text-align:left;
}
#themeLeft {
width: 341px;
height: 100%;
background: url('an image') no-repeat bottom right;
}
#themeRight {
width: 340px;
height: 100%;
background: url('an image') no-repeat left bottom;
As you can see I've played around with absolute positioning for the containing div - which makes it actually stick to the bottom like I want.. but then won't scroll to show the top of the table.
Please let me know if you need any further info or would like to see the site and I'll be happy to provide the url via email or similar.
Thanks for any help you can provide.