Should I Add Overflow:Hidden To My Sidebar?

HTML & CSS
1

LINK-
http://rainscapes.com/index.011513.html

The sidebar is pushing out of the container div id=main. I thought adding overflow: hidden to either the sidebar div or the main div would help, but it didn’t fix the problem. Can anyone help me out with a fix?

Thank you in advance!

Todd Temple

2

Hi,

Your sidebar is absolutely placed so using overflow to contain floats is of no use here. Absolute elements are removed from the flow so there is nothing you can do to get a footer underneath an absolute column apart from hard coding it with fixed margin values - which would be silly.

The solution is to float the sidebar and then you can clear the floats with overflow:hidden on the main page wrapper.

In your code you should bring the sidebar inside #main and apply overflow:hidden to #main and then float the sidebar with the appropriate width.

e.g.


  </div>
  <!--end sidebar-->
 [B]</div><!--end main-->[/B]



#sidebar {
    background-color: #D1F2F5;
    float: right;
    margin:-67px 9px 0 0;
    padding: 0 25px;
position:static;
   /* position: absolute;
    right: 50px;
    top: 310px; remove these*/
    width: 261px;
}