Printable View
I am trying for a way to make a footer menu attached to the bottom of the browser window, overlapping other content .I am able to replacing table layout css positioning but how can i put my box at the bottom of the page? i want it at the bottom of browser window how can i do that ?can someone help me ?
thank you
try this codeQuote:
<style>
html, body { height: 100%; min-height:100%; height:auto!important; }
body { margin: 0; padding: 0; background: #d7e3ea; /*right bg */}
#background { /*left bg */ position: absolute; width: 50%; height: 100%; background: #000000;}
#content { position: relative; z-index: 1; height: 100%; /* puts content on top of background in stack order */ margin:0px auto; /*to center in IE*/ text-align:center;}
#mainTable { margin:0px auto; /*to center in IE*/ text-align:center; height: 100%; min-height:100%; width: 1077px; left:-9px; position: relative; background-image:url(images/shaded_bg.jpg); background-repeat:repeat-y; }
</style>
if you footer at bottom of window , try this code
css code
Quote:
html, body {
height:100%;
}
#non-footer {
min-height:100%;
}
* html #non-footer {
height:100%;
}
#footer {
height:50px; (or whatever height you have)
margin-top:-50px;
}
And the markup
<body>
<div id="nonfooter">
All of your page's content - NOT absolutely positioned, but relative or static
</div>
<div id="footer">
the part you want to be sticked to the bottom of the screen/page
</div>
</div>
Dear Modifier,
With due respect, I am pleased to get the CSS code.
With thanks & regards,
swapan.
If you have to keep position absolute, you may try positioning from the top. Assign "position:relative" to your "container" div, and then "position:absolute;bottom:0;" to your "copyright" div. You can check out the following link.
http://forums.techarena.in/software-...nt/1249145.htm
http://forums.techarena.in/software-...nt/1250171.htm