How To Get 2 Columns Equal Height

[Major_Que]

I have put together a new website and I am having a problem that is frustrating me to no end so I am here looking for expert help.

 

In my "content" column, I am trying to have the article I have written. This content is going to change from page to page depending on the amount of content. At the bottom of the "content" I am trying to add a comments section.

 

To the right of the "content" column I have a "sidebar" and the problem I am having is as the "content" column grows or shrinks, it is effecting the positioning of the "sidebar" and moves the content of the "sidebar" up or down. 

 

I have tried to investigate how to correct this and what I have read makes absolutely no sense to me so the only way I can figure out to fix this (keeping in mind that I am in the process of teaching myself CSS and I use the trial and error method of learning) is to set the height of the "content" column to a fixed number and then force the "sidebar" to move up or down by using something like 'margin-top: -1200px". The problem with this is when comments are added, the content of the "sidebar" moves down.

 

My question is, does anyone know of a way to get both columns to adjust to equal heights that won't cause me to pull what little hair I have left out? Would that anyone be willing to explain to me why your method should work?

 

I know that I should include the code for the page I am having the problem with, but it is (in my opinion) pretty extensive and if someone is willing to try to tackle this it might be easier to just bring up the source code.

 

Just FYI . . . the page in question can be seen at http://pickmysmoker.com/best_propane_smokers.php/

 

 

Thanks in advance . . .

[Strider64]

You should treat the sidebar as a navigational menu and the sidebar as a container: 

 

For example:

<div id="sidebar">
  <h3>Popular Articles</h3>
  <div id="sidebarNav">
    <ul>
       <li><a href="http://pickmysmoker.com/masterbuilt_propane.php/">Masterbuilt Propane Smoker Review</a></li>
       <li><a href="#">Continue on...</a></li>
       <!-- Continue on with nav menu -->
    </ul>
  </div><!--/ End of #sidebarNav -->
</div><!--/ End of #sidebar -->

I would also check into using clearfix (Do a Google Search to find good examples) and utilizing box-sizing: border-box; for your sidebar issues. Do it this way you will be able to really stylize your Sidebar Navigation. As a personal preference I prefer to have my sidebar navigation on the left rather than the right, but like I said it's a personal preference. 

Edited October 31, 2014 by Strider64

[Major_Que]

Thanks so much for your advice/suggestions.

 

I am looking into and studying the clearfix thing to see how I can best utilize it to improve my websites.

 

Finally, is there a particular reason that you prefer sidebars on the left rather than the right?

 

 

Cheers . . .