Footer overlaps to maincontent

[csslearner18]

Hi there,
greed83 previously posted the issue but the thread still didn't solve my paroblem!
http://www.webdeveloper.com/forum/sh...d.php?t=173740

Basically When I resize the browser, the footer looks like it’s floating and overlaps the content by about 50px from the bottom (my footer height is 50px).But when I make the browser much smaller, the footer actually disappears

Would really appreciate it if you could give me some advice on this?

My main content includes
1. menu bar (on the left)
2. 2 column content (on the right)
I used div float.

I’ve checked all the margins, but this still doesn’t solve the problem!

Here's my HTML
<div id="page-wrap"><!-- Includes header -->
<div id="main-content">
<div id="left-nav">
<ul id="nav">....</ul>
</div><!-- END left-nav -->

<div id="right-col">
<div id="right-top">image goes here</div>
<div id="right-left">
<p>text goes here</p>
</div><!-- END right-left -->

<div id="right-right">
<p>text goes here</p>
</div><!-- END right-right -->
</div><!-- END text -->
</div><!-- END right-col -->
</div><!-- END main-content -->
</div><!-- END page-wrap -->

<div id="footer">
footergoes here
</div>
</body>

Here's my CSS
div#page-wrap {
width:800px;
margin-left:auto;
margin-right:auto;
}
div#main-content {
margin-left:auto;
margin-right:auto;
padding-bottom: 50px; /*Same height as footer*/
}

div#main-content div#left-nav {
float: left;
width: 230px;
padding-top: 3px;
}

div#main-content div#left-nav ul#nav {
list-style: none;
display: block;
width: 113px;
height: 22px;
float: left;
color:#4b4736;
text-decoration: none;
font-weight: bold;

}

div#main-content div#right-col {
float: right;
width: 557px;
margin-left: 9px;
}

div#main-content div#right-col {
float: right;
width: 547px;
margin: 0px 5px 0px 10px;
}

div#footer {
padding: 0 0 0 0;
position: relative;
margin-top: -50px;
bottom:0px;
height:50px;
clear: both;
}
div#footer div#image {
width: 885px;
margin-left:auto;
margin-right:auto;
}

[repeater09]

is the footer div inside your page-wrap div? if it is then you shouldnt have to set auto margin for left and right it should fit inside....if you don't then it could be conflicting with the height set you have for div#main-content div#left-nav...try putting the footer div with the br=clear css code (which you already have set) in the page-wrap div....if not try removing the height for the left-nav and see if that works...kinda hard to really know if i cant see

[csslearner18]

Hi repeater09,
YES it worked!
removing the height for the left-nav didn't work.
When I put '<br style="clear:both;" />' in div#footer in html, it created vertical scroll bar, but when I put it in div#main-content html, it worked apart from IE6

Need to look into this but thank you so much!