Forum Moderators: not2easy
#container {
position: relative;
width: 760px;
margin: 7px auto;
text-align: left;
background: #ffffff;
min-height: 99%; /* this is where inheritance stops */
}
/* if you remove this then the container disappears in IE */
html #container {
width: 760px;
height: 99%;
}
#footer
{
position: absolute;
bottom: 0;
margin: 0 0 0 0;
padding: 0 0 10px 0;
height: auto;
width: 760px;
background: #4c4c4c;
}
#top-row
{
position: absolute;
margin: 0 0 0 0;
padding: 0 90px 60px 90px;
width: 580px;
color: #4c4c4c;
}
</style>
</head>
<body>
<div id="container">
<div id="top-row">
<p>(just copy and paste this text a bunch of times if you want to test out the overflowing/overlapping into the footer)<br /><br /><br /></p>
</div>
<div id="footer">
<p>About us ¦ Links ¦ Sitemap </p>
</div>
</div>
</body>
</html>
#top-row {
position: absolute;
margin: 0 0 0 0;
padding: 0 90px 60px 90px;
width: 580px;
color: #4c4c4c;
}
remove the absolute positioning from that rule, it is being taken out of the flow, which is why it's overflowing the bottom of the container.. (which the footer is taking it's position from)
/* if you remove this then the container disappears in IE */
* html #container {
height: 99%;
}
the * is required in that rule it's a hack to target IE Only. IE will stretch the container beyond 99% height if required, but other browsers need the min-height rule in the previous rule.
Suzy
