Grow your CSS skills. Land your dream job.

How to Get my Sidebar to extend the full Length

  • # May 2, 2009 at 1:05 pm

    Hi,

    I’m having a problem getting my Sidebar to extend the full length of the page. I don’t know how to get it stretching to page length. http://karbondesigns.com/Wordpress The final DIV for the sidebar is in the Footer.php file.

    Code:
    /*
    SIDEBAR
    */
    #socialsidebar { float: left; width: 280px; border-right: 1px solid #89b1cd; border-bottom: 1px solid #89b1cd; background: #e1ecf2; }
    .widget { height: inherit; width: 280px; padding: 0px 0 0; margin: 10px 0 15px 2px; }
    .inside { margin: 0 5px 0 0; }
    .widget ul li { padding: 7px 5px 0 0; color: #1E5B7E; }
    .widget ul li a { display: block; color: #1E5B7E; }
    .widget ul li a:hover { text-decoration: underline; }
    .widget h4 { color: #5D5D5D; margin: 0 0 0 10px; font-size: 1.4em; font-family: Georgia; }
    .widget ul li p { display: block; margin: 0 0 0 15px; font-size: 1em; }
    .thumb { width: 62px; }
    .flickr-thumb { margin: 0 0px 10px 15px; height: 41px; width: 62px; overflow: hidden; float: left; }
    .ad { width: 125px; height: 125px; float: left; background: white; text-align: center; margin: 5px 0 0px 10px; border: 1px solid #007987; }
    .ad-right { width: 125px; height: 125px; float: right; margin: 5px 5px 0px 0; border: 1px solid #007987; }
    .ad h2 { font-family: Arial; font-weight: normal; }
    Code:

    Twitter


    Ads

    Theme Forest
    Light CMS
    Authentic
    PSD

    Track Me!

    # May 2, 2009 at 1:32 pm

    i made a little example of how to do this a while back http://charles-harvey.co.uk/examples/niceLayout
    Heres the code to make it. It involves giving absoluteposition to your sidebar and specifiying a top and bottom value.

    HTML

    Code:

    Quisque praesent

    Ac eget eget, est feugiat ultricies tempus ultricies Aenean dapibus, eleifend amet facilisis. neque ante. et volutpat. malesuada tortor leo. augue, habitant luctus, enim Pellentesque Nam sit vulputate Aliquam facilisis turpis Ut erat. placerat libero eros quis, Vestibulum metus tincidunt netus tincidunt accumsan amet est.

    Vitae sit mi wisi, vitae, lacus sed, egestas. in egestas elit et Vestibulum orci, faucibus, tortor morbi quam, senectus non fermentum, wisi. eros neque ullamcorper erat turpis eu id cursus erat eu egestas ipsum tempor tristique amet, Donec dui et quam Aenean Mauris magna semper. amet, commodo vitae, ornare rutrum ac Donec sapien pharetra.

    CSS

    Code:
    #page-wrap {width:960px;margin:20px auto; background: #daede9;position:relative;min-height:520px}

    #page-wrap div {padding:10px 10px 0}

    #main {margin:0 220px 0 10px; position:absolute;top:70px;bottom:10px;background: #bbca45;}

    #sidebar {position:absolute;width:180px;right:10px;top:70px;bottom:10px; background: #ae6561;}

    #menu {position:absolute;top:10px;height:40px;background:#166aea;right:10px;left:10px}

    # May 2, 2009 at 2:09 pm

    Thanks a lot! Problem Solved!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".