Help fixing sidebar border in page template

I have recently added a blog to a website: www.mindsaligned.com.au/into-minds. I wanted the blog to have a sidebar similar to other pages on the site, so I just copied a page template from a page that has a sidebar and renamed the template "Blog Template". I've assigned the blog template to the actual blog and everything looks great except for one issue...

The sidebar (the area that contains "categories", "recent posts", etc) is meant to have a left border going all the way up the body of the page (just like it is on this page: www.mindsaligned.com.au/events), however, you'll notice on the blog, the left border is only showing up a little bit toward the bottom of the page body.

I inspected the element using Firebug and noticed that the entire sidebar section (possibly div?) seems to have shifted down on the page, hence, the left border moving down as well. I went into the page template I created for this page to see if I could find the issue in the HTML. This is what the HTML looks like for that section:

<div id="main">

<div class="main-holder">

<div class="main-frame">

<div class="main-inner">

<div class="main-inner2">{tag_pagecontent}

<div class="sidebar">

</div>

</div>

</div>

</div>

</div>

</div>

I tried moving the "{tag_pagecontent}" tag after the first closing "</div>" tag and that seems to solve the border issue, but it creates another issue where the sidebar links no longer work (I can't even highlight any of the text in the sidebar with my cursor).

Can anyone tell me what I'm doing wrong and how I can fix this issue? I have basic knowledge of HTML and CSS so if you have a solution, please simplify for me as best as you can in your responses.

Thanks!

Nicole