SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Should I Add Overflow:Hidden To My Sidebar?

    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
    Todd Temple > T2 Design

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
      </div>
      <!--end sidebar-->
     </div><!--end main-->
    Code:
    #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;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •