Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

automatically adjust sidebar background height WordPress

  • SOLVED

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;
}

Answers (8)

2012-08-02

Sébastien | French WordpressDesigner answers:

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 !
:-)


Sébastien | French WordpressDesigner comments:

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;


Sébastien | French WordpressDesigner comments:

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


Ciaran Whelan comments:

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.


Ciaran Whelan comments:

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

2012-08-02

Baki Goxhaj answers:

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.


Ciaran Whelan comments:

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>


Ciaran Whelan comments:

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


Baki Goxhaj comments:

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.


Ciaran Whelan comments:

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?


Baki Goxhaj comments:

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

2012-08-02

Francisco Javier Carazo Gil answers:

You have to add this rule:

height:100%


Francisco Javier Carazo Gil comments:

This:

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


Ciaran Whelan comments:

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

2012-08-02

Dbranes answers:


You could try this:

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


or whatever the minimum should be.


Ciaran Whelan comments:

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

2012-08-02

webGP answers:

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")));


Ciaran Whelan comments:

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.

2012-08-02

Abdelhadi Touil answers:

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.


Ciaran Whelan comments:

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.

2012-08-02

Agus Setiawan answers:

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.


Ciaran Whelan comments:

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

2012-08-02

Martin Pham answers:

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: [[LINK href="http://marxvn.com/width.html"]]http://marxvn.com/width.html[[/LINK]]


Ciaran Whelan comments:

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