logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$10
automatically adjust sidebar background height

Hi,

What I would like is to have the sidebar background #F3F3F3 of the pages to automatically fill the height of the element column. I have attached a screenshot of the area that I am describing with the arrow pointing to the space that I want to automatically adjust on each page I create. http://caffebuongiorno-norwood.com.au/breakfast/

Here is my poor attempt to do this, but I think I am way off on getting this right. I feel it needs some js possibly.


#col-23-2 {
width: 200px;
float: right;
background: #F3F3F3;
border-left: 1px solid #E8E8E8;
padding: 12px;
margin-top: 72px;
min-height: 300px;
}

This question has been answered.

attachment image View Attachment

cmwwebfx | 08/02/12 at 7:51am Edit


(8) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    08/02/12
    7:56am
    Francisco Javier Carazo Gil says:

    You have to add this rule:

    height:100%

    • 08/02/12 7:57am

      Francisco Javier Carazo Gil says:

      This:

      #col-23-2 {
      width: 200px;
      float: right;
      background: #F3F3F3;
      border-left: 1px solid #E8E8E8;
      padding: 12px;
      margin-top: 72px;
      height: 100%;
      }

    • 08/02/12 7:58am

      cmwwebfx says:

      I tried that initially, but that didn't work.

  • avatar
    Last edited:
    08/02/12
    8:01am
    Dbranes says:


    You could try this:

    .regular-nav{
    
   min-height: 300px;
    
}


    or whatever the minimum should be.

    • 08/02/12 8:04am

      cmwwebfx says:

      That does not work as I am trying to make the background of sidebar to stretch 100% height inside its column.

  • avatar
    Last edited:
    08/02/12
    8:46am
    Sébastien | French WordpressDesigner says:

    http://www.alistapart.com/articles/fauxcolumns/

    my answer here :-) : it's not a good idea to use js because if i disable js in my browser, i can't see your background...
    and because it's JUST a problem of css !
    :-)

    Previous versions of this answer: 08/02/12 at 8:46am

    • 08/02/12 8:09am

      Sébastien | French WordpressDesigner says:

      make an image white and gray and use this image in background of #container-23

      you can make an image with an height=2px, white at left, gray at right, and use repeat-y in your background like that

      background:url(my_image.jpg) repeat-y;

    • 08/02/12 8:11am

      Sébastien | French WordpressDesigner says:

      don't use js for this problem, that's not useful !

    • 08/02/12 8:33am

      cmwwebfx says:

      Hi Sebastien, thank you very much, I should have thought to read the info at List Apart, I have the books from them. grrr.. Anyway, is there any reason that .js is not a good solution? I didn't think to just make a background image for the complete container. Good tip for next time I just need to think outside the square I guess.

    • 08/02/12 8:48am

      cmwwebfx says:

      Interesting that someone would turn off js... But how would the image background work in responsive if I made that container a background image?

  • avatar
    Last edited:
    08/02/12
    8:03am
    webGP says:

    Hello,

    You have to change your HTML code if you want to do this using CSS, but I suggest to use JS. Put the following line into js file:


    
jQuery("#col-23-2").css("min-height", jQuery(".post-inner-single").outerHeight()-parseInt(jQuery("#col-23-2").css("margin-top")));

    • 08/02/12 8:35am

      cmwwebfx says:

      hi there, I did try that, and then wrap it in <script> but I couldn't get that to work. Baki has come to the rescue below with what I need, and Sebastien has pointed out a simple method using an image next time.

  • avatar
    Last edited:
    08/02/12
    8:04am
    Baki Goxhaj says:

    You will have to use jQuery at this time. Here goes the code you have to put on <head></head> or your main js file.


    
var sideHeight = jQuery('.menu_manager').height();
    
jQuery('#col-23-2').css('height', sideHeight + 'px');


    PS: Wrap into <script> if you put it directly into document head.

    Hope this helps.

    • 08/02/12 8:09am

      cmwwebfx says:

      Hi, I tried this, and added this into the head, but it doesn't seem to work. You can see it in the source.
      <script>var sideHeight = jQuery('.menu_manager').height();
      jQuery('#col-23-2').css('height', sideHeight + 'px');</script>

    • 08/02/12 8:17am

      cmwwebfx says:

      Was that meant to be on 2 lines each having <script> and placed in the head?

    • 08/02/12 8:23am

      Baki Goxhaj says:

      Here goes full code as it should be put on the doc head. 


      
<script>
      
jQuery(document).ready(function() {
      
    var sideHeight = jQuery('.menu_manager').height();
      
    jQuery('#col-23-2').css('height', sideHeight + 'px');
      
});
      
</script>


      This should work.

    • 08/02/12 8:26am

      cmwwebfx says:

      Baki, that is awesome, works perfect. Thank you very much for this. I presume this will work anytime I like to have a sidebar to stretch the background colour to the bottom of the column?

    • 08/02/12 8:30am

      Baki Goxhaj says:

      Yes, that's the idea, to have the sidebar dynamically stretch, and it will :)

  • avatar
    Last edited:
    08/02/12
    8:10am
    Abdelhadi Touil says:

    Here is a good tutorial:
    http://css-tricks.com/fluid-width-equal-height-columns/
    and here a jquery fix that I'v used in one of my cleint's website and it works great:
    http://www.cssnewbie.com/equal-height-columns-with-jquery/
    Good luck.

    • 08/02/12 8:36am

      cmwwebfx says:

      Thank you for that, I listen to Chris's podcasts all the time, and didn't think to turn to his site and see any solutions.

  • avatar
    Last edited:
    08/02/12
    8:17am
    Agus Setiawan says:

    hi, on file custom.css, find code :

    /*Sidebar*/
    #col-23-2 {
    width: 200px;
    float: right;
    background: #F3F3F3;
    border-left: 1px solid #E8E8E8;
    padding: 12px;
    margin-top: 72px;
    height: 100%;
    }

    change height:100% to height:500px;

    hope thats help.

    i can do it for you if you grant me an access to your dashboard.

    thank you.

    • 08/02/12 8:19am

      cmwwebfx says:

      Agus, this is not the correct way to do it as it does not dynamically adjust to the height of pages.

  • avatar
    Last edited:
    08/02/12
    8:43am
    Martin Pham says:

    try this structure content and css. Example:

    HTML code


    
<div class="main">
    
	<div class="content">
    
	</div>
    
	<div class="sidebar">
    
	</div>
    
	<div class="guide-background"></div>
    
</div>

    CSS

    
.main {
    
position: relative !important;
    
display: block;
    
width: 960px;
    
margin: 0 auto;
    
}
    
.content {
    
	width: 620px;
    
	float: left;
    
}
    
.sidebar {
    
	width: 300px;
    
	float: right;
    
}
    
.guide-background {
    
	width: 300px;
    
	position: absolute;
    
	background: #f5f5f5;
    
	height: 100%;
    
	right: 0;
    
	z-index: -1;
    
	border-left: 1px solid #DFDFDF;
    
}


    Demo: http://marxvn.com/width.html

    • 08/02/12 8:45am

      cmwwebfx says:

      Hi Martin, it is all fixed now. Baki Came to the rescue for me... thank you.

This question has expired.



Gabriel Reguly, Hai Bui, Manoj Raj, cmwwebfx voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.