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)
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?
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 :)
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.
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.
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.
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.
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.
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.