Sidebar, Footer and Main Content Misalignment

The main content and sidebar are misaligned.

How do I make it of same height?

See examples at https://compelligence.com/bookblog/?page_id=3 and https://compelligence.com/bookblog/?page_id=2

Please let me know. My CSS is a bit messy and the codes are as below. Thanks in advance.

/* Begin Sidebar */
#sidebar
{
/*padding: 20px 0 10px 0;
margin-left: 610px;
margin: 0 0 0 0;*/
float: left;
margin-bottom: 0;
padding-left: 5px;
background-color: white;
width: 187px;
border-right: 2px solid #ddd;
}

#sidebar form {
/*margin: 0;*/
}
/* End Sidebar */

.narrowcolumn {
/*float: left;
padding: 0 0 20px 45px;
background-color: white;
margin: 0 auto 0 auto;*/
float: left;
padding-left: 6px;
background-color: white;
margin-right: auto;
margin-left: 10px;
width: 600px;
/*border-top: 5px solid #ddd;
border-bottom: 5px solid #ddd;*/
border-right: 2px dotted #ddd;
border-left: 2px solid #ddd;
}