Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Mar 2004
    Posts
    109
    Thanks
    5
    Thanked 0 Times in 0 Posts

    arghhh.. sidebar height not stretching with page

    ye olde sidebar height problems... see: http://inaudible.co.uk/blog/archive/category/crocketts
    namely how the sidebar stops as soon as content within it stops. i want it to continue down with the rest of the page.

    i did figure out how to do it a while ago (caused a few seperate problems but meh) but i've been trying to figure out how again for hours and i'm not getting anywhere.

    code is something like below. i think it's something to do with the position:absolute; part but i've tried numerous things including float: right;, adding extra div clear:both's, etc.. and the best i've got so far a side bar that doesnt appear until after the rest of the page.

    can anyone help? thanks.

    ps. i've tried with a seperate background image for the whole page and that didn't work either, the image dissapeared behind all other content (wasn't visible at all after page loaded) and i have my doubts as to how well it would work anyway (image needs to align with it's edge against the right side, and while using margins / borders on the main body).

    Code:
    <div id="page">
    . <div id="content" class="narrowcolumn">
    . . <div id="post">
    . . . <div id="entry">
    . . . . <img class="alignleft"> entry text
    . . . </div>
    . . <div id="post">
    . . . <div id="entry">
    . . . . another entry
    . . . </div>
    . . </div>
    . </div>
    . <div id="sidebar">
    . </div>
    </div>
    
    .narrowcolumn .entry, .widecolumn .entry {
            padding: 0 5px 0 0;
            margin: 0;
    	}
    
    img.alignleft {
    	padding: 0;
    	margin: 0 7px 2px 0;
    	display: inline;
    	}
    
    #sidebar
    {
    	padding: 0 0 10px 5px;
            position: absolute;
            right: 10px;
            top: 15px;
    	width: 145px;
            text-align: center;
    	}

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Regular Coder
    Join Date
    Mar 2004
    Posts
    109
    Thanks
    5
    Thanked 0 Times in 0 Posts
    heh... after 4 hours

    Code:
    <script type="text/javascript">
    //<![CDATA[
    onload=function() {
    document.getElementById('SIDEBAR_ID').style.height=
    document.getElementById('MAIN_CONTENT_ID').offsetHeight+"px";
    }
    //]]>
    </script>
    it would be nice not to have to resort to javascript, but can i be bothered spending another 4 hours on it?

    thanks.


  •  

    Posting Permissions

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