Hello,
Is there a way to match the height of a sidebar to the height of the main content? I am using RW7 and the seyDesign Copper 2.0 theme. Thank You!
http://www.educationoasis.com/book-central/book-reviews/the-crystal-mountain/
You could switch off the theme sidebar and put your main content in a 2 column stack, split 70:30 (or something similar).
Mark
Hi @cynthia
Iâm guessing that the main content area height is dynamic/variable depending on what you or the client choose to put in there from one moment to the next, yes?
On that basis itâs probably best to work out the height of the main content area ( contentWrapper ) then get itâs absolute height, then apply that value to the sidebar ( aside ).
Try putting this javascript in the page or project level javascript container. Itâs written this way so that it will make sense to you both now and when you look at it later and wonder what it is 
var aa = document.getElementById("contentWrapper").clientHeight;
var bb = document.getElementById("aside");
var cc = document.getElementById("sidebarWrapper");
var dd = aa + "px";
bb.style.height=dd;
cc.style.height=dd;
Let me know.
Iâm aware there are lots of ways to achieve this. I think Joe Workman has a brilliant âMatch Heightâ stack that could be useful.
3 Likes
I was hoping to use the sidebar that comes with the theme, but if I canât make it work, I may try that. Thank you!
I believe that worked, but I donât know for sure because Iâm having an awful time trying to upload my files. It just keeps saying that it canât upload to the ftp server.
Iâm not sure, but I donât think that the Match Height stack will work in the sidebar. Or at least, it doesnât show it in the demo.
Thank you so much!
@cynthia
I think the Match Height stack would be useful if you are using only stacks on your page and are able to turn the theme provided sidebar off entirely.
If I am providing a sidebar area when using eg Foundry or Foundation all I ever do is use a split two column stack - just as @MortalWombatUK describes. I bet that how loads of users do it nowadays.
Hope it works out.
4 Likes
@kryten⌠Interesting. So youâre saying you bypass the sidebar altogether and just use a column in the content area to do what you would normally do in a sidebar?
Thatâs how ya do it Lisa, use column turn sidebar off then you can use any stacks you wish in that column
3 Likes
Yes. Its an option 
Look at it this way⌠âotherâ websites that are not made with RW have sidebars too, right? How do they do it? If a simple split column arrangement does not do it for you, then there are stacks which allow you to assign CSS classes to content zones. Just use one of those to create a âsidebarâ class then you can style that content zone however you wish unbound by RW, unbound by stacks⌠pretty much anything goesâŚ
2 Likes
As a non-programmer, itâs hard to make my brain accept new things and ways to use certain things. That is why I love this forum thank you
3 Likes
That makes sense - thank you. Would I have to use a stack for content zones in order to format it differently from the main content? If so, could you recommend one? Should I use a special type of column to have them separate, or just use a regular two column stack?
Just a regular 2 column, if you want to add CSS then put joe workman free CSS box in a column to target just what you put in that stack if you need that for some reason.
As @swilliam says⌠just start with a standard two column stack and build up your main content in one and your sidebar content in the other.
Donât start with special columns or special classes. Allow the design and the aesthetic you require to drive the need for anything else. My earlier comment about CSS classes and things was really just to help reinforce the âart of the possibleâ in RW, not to assert that you need to use that method specifically.
As @MortalWombatUK says⌠a 70/30 two column stack will get you a long long way toward a stacks controlled main content and sidebar.
3 Likes
OK - sounds good - thank you!
OK, that helps clarify things - thank you very much!
2 Likes
Hi Cynthia
Re: a non coding way to solve your problem
Iâm into coding any Rapidweaver site I create. A lot of coding. But if you donât want to get into all that,
hereâs a very simple and easy way to solve your problem and make the content & sidebar (yes using the regular sidebar that comes with the theme) be the same height.
Whichever area is the shorter of the two, do either one of these two things:
(1) if the last element in the short section is a text box, simple add extra line spacing (using the return key) without actually typing any text in those extra lines;
or
(2) if the last element in the short section isnât a text box, then add an extra text box, and then add extra line spacing (using the return key) without actually typing any text in those extra lines.
Bottom line: in either case, you wonât have any text in those extra lines youâve added, youâll just using them as extra space at the bottom of the short section to even things up. Youâd have to go back and forth a few times, checking both sections, until you get them equal. This eliminates any coding at all and should work with any theme you use.
Note: you can also use this idea to add extra bottom border space to text, so the text doesnât end exactly where the end of the section ends.
I know all the coders out there wonât approve of this method, but in the end, no one will know the difference. Hope this alternative method helps out.
That method may only work on one screen size though, right? It wouldnât be responsive
3 Likes
hi Don,
It seems as though the sidebar (using it in my theme) is always the shorter of the two, compared to the main content. The method you said sounds great, but is there a way to put a text box in the sidebar in order to add space with the return key? Thank You!
Cynthia:
Thatâs a very good question. And reading it made me realize that I should have been a little more specific in my above answer to you.
You donât have to add a text box in the sidebar because the sidebar is already a text box. So in the case of a short sidebar, if all you have in that sidebar is text already, then all you have to do is add extra line spacing to the text that is already there and the depth of the sidebar will be extended.
What I was referring to in my original answer was when you didnât have text as the last element in the sidebar. As for an example, if you had an image (a photo, a .jpg or .png file) as the last element. Then all youâd have to do was put your cursor under the image and instead of typing anything new, just hit the return key to add extra line spacing. The result will be that the sidebar will extend in depth corresponding to how much line spacing you add.
I might also add that many third party themes, at least the newer ones that Iâve seen, handle this âsidebar-too-shortâ issue by automatically extending the sidebar in that particular theme to reach the bottom of the main content area. In other words, the sidebar will extend all the way to the footer area, no matter if thereâs anything in the sidebar or not. At the end of the day, as a designer, I donât like the sidebar going all the way down and actually touching the footer section on these newer themes. And on the other hand, I also donât like the sidebar hanging at the top of the page with all that space underneath it in some of the older themes. Which is why after all is said and done I donât use any theme sidebar. I disable it, and instead use a 2-column answer that I talk about below in the âNoteâ paragraph.
But to address your particular problem Cynthia, I havenât really used or looked at, in any deep way, the themes that come standard with Rapidweaver. I just donât like them. But I do know that the âReasonâ theme that comes with RW does have the sidebar-too-short problem. Which is why Iâm using it to solve your problem of matching the height of a sidebar to the height of the main content:
I prepared a short 3-minute video using the Reason theme to show you all the ways that you can deal with this issue. Iâve put this video up on my server so you can view it. Hereâs the link (it has audio, so have your speakers on): SidebarProblem
Note:
The method Iâm describing here isnât the best way to handle your problem. I only suggested it as an answer because it seemed like you were new to RW (forgive me if Iâm wrong), and because of that, might not have too many RW âadd-ons" at your disposal to deal with the problem any other way. And what would that âother wayâ be: I thought Mark Harradine & Scott Williams in their answers to you had the best way to deal with making the main content and sidebar end up being the same depth/height: use a 2-column stack. I use this method all the time. But that would mean youâd have to have the Stacks 3 add on, which costs 50 bucks. So without that stack, the method I describe here would work without any additional cost. But if you can afford it, I would highly recommend Stacks 3 to anyone using RW. The truth be told, RW should have this in the base software (not as a third party, additional cost, add on) because without it you are creating in the dark. Layout/design wise, Stacks 3 (with itâs library of stacks inside it) makes everything sooooooo much easier.
One last comment, which is a response to Jason Bostick, who suggested that this method âmay only work on one screen sizeâ and wouldnât be responsive. Honestly I canât say 100% that it is or isnât responsive (responsive meaning that it can be viewed correctly on all devices). All I can say is that in my experience of using this method in my early days of using RW, it worked perfectly fine on all devices, smart phones and tablets as well as regular computers and laptops. But as I also said, at this time, Iâd only use the 2-column, and sometimes even a 3 or 4 column method (1, 2 or 3 columns of main content with a 1 column, and sometimes 2 column left-side-and-right-side sidebars) to solve the main content and sidebar issue. As I said before, I never use the sidebar that comes with any theme. Just a suggestion, but you might want to think about going that way too.
Anyway, check out the video. I think youâll like it. It explains the whole idea of âline spacing/extra height.â
2 Likes
hi Don,
Thank you so much for the video and all of your help - itâs wonderful! I sent you an email.
~ cynthia