i have designed a template for wordpress, the problem is that when sidebar gets longer some of it will cover the footer in internet explorer 6 and 7, the website address is : http://blog.baabak.ir (its in persian), but if you look at it in internet explorer 6,7 you will see the sidebar logo will cover the footer, for example in this page :
http://blog.baabak.ir/?page%5Fid=141
but the website is ok in other browsers, whats the problem ?
you have to make sure to use the clear:both;, when you are using float in CSS
your <div id="main_content"> shouldn't be floating.
only the sidebar should set with float:left if you want a right sidebar you should make float:right.
see this tutorial how to make a two column liquid design.
+---------------------------------------------+
+ HEADER (no float) +
+---------------------------------------------+
+ Sidebar float:left + content (no float) +
+---------------------------------------------+
+ footer (no float) +
+---------------------------------------------+
right now you page is like this
+---------------------------------------------+
+ HEADER (no float) +
+---------------------------------------------+
+ Sidebar float:left + content (float:right) +
+---------------------------------------------+
+ footer (no float) +
+---------------------------------------------+
which create your problem
Wrap the two columns in a div and set that to clear both like the header and footer.
Not sure if this still active, however since I found this easy on Google, others will as well. I completely agree with clearing the floats, that is important, however one more "issue" could arise if your sidebar is: position:absolute; or any kind of position for your sidebar, that's where the problem is.
i.e. in my case I had this:
margin: 120px 0 0 0;
float: right;
width: 235px;
left: 733px;
}
the sidebar is positioned just where I wanted and it "pushes" the footer instead of overflowing it, or going under in some situations.
Thanks, Emil