This is sort of a followup to my last question: <!-- m --><a class="postlink" href="http://tinyurl.com/dcv72">http://tinyurl.com/dcv72</a><!-- m -->
I created a footer using the method described here: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/footers/">http://www.alistapart.com/articles/footers/</a><!-- m -->
But now, whenever I vertically resize the window, the content disappears (if I resize it horizontally, the content reappears). I have no idea why that's happening.
Here are the basics of my code:
<div id="container">
<div id="content">
<table> table rows and columns and stuff here
<div id="header">yada, yada, yada</div>
more table rows and columns and other gibberish....</table>
</div id="content">
<div id="footer">
<script language="JavaScript">MakeFooter()</script>
</div id="footer">
</div id="container">
And the associated CSS:
html, body {
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
#content {
/*position: absolute;*/
padding-bottom: 100px;
}
#footer {
position: absolute;
bottom: 0;
}
If I add "position: absolute" to #content, then the content will not disappear, but the footer also will not appear correctly.
I am using IE 6 browser. Why does my code disappear (and how do I stop it)?
Thanks in advance for all help.
-JeffI had same problem, it worked fine when I removed position:relative from container class.Why use absolute positioning at all? If you want the content before the footer, you don't need absolute positioning.
I created a footer using the method described here: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/footers/">http://www.alistapart.com/articles/footers/</a><!-- m -->
But now, whenever I vertically resize the window, the content disappears (if I resize it horizontally, the content reappears). I have no idea why that's happening.
Here are the basics of my code:
<div id="container">
<div id="content">
<table> table rows and columns and stuff here
<div id="header">yada, yada, yada</div>
more table rows and columns and other gibberish....</table>
</div id="content">
<div id="footer">
<script language="JavaScript">MakeFooter()</script>
</div id="footer">
</div id="container">
And the associated CSS:
html, body {
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
#content {
/*position: absolute;*/
padding-bottom: 100px;
}
#footer {
position: absolute;
bottom: 0;
}
If I add "position: absolute" to #content, then the content will not disappear, but the footer also will not appear correctly.
I am using IE 6 browser. Why does my code disappear (and how do I stop it)?
Thanks in advance for all help.
-JeffI had same problem, it worked fine when I removed position:relative from container class.Why use absolute positioning at all? If you want the content before the footer, you don't need absolute positioning.