Q:

Placing Divs side by side, with equal column heights, inside ContentPlaceHolder in ASP.NET

I'm trying to have three columns.  The left and right columns contain a button and these buttons should stay on a fixed alignment to the outside border of the container.  The center column contains an asp:Table that is created dynamically and have everything from 1 row and 1 column to 6 rows and 7 columns. 
I've tried to follow this CSS example which ultimately becomes this site: http://www.alistapart.com/d/holygrail/example_3.html, and I've gotten the divs to be side by side - but I can't get the left and right columns to align vertically or have equal heights with the center div tag, which I'm guessing is the same thing. 
I don't know if it matters but my divs are inside a ContentPlaceHolder in an ASP Page. 
Here's my code:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    //Container to the three columns
    <div id="calendarContainer"> 

        //The left button container
        <div id="navigateButtonLeft" class="calendarColumn">
            <asp:Button ID="btnLeftMonth" runat="server" Text="<" 
                        onclick="btnLeftMonth_Click" /> 
        </div>

        //The table/month-calendar container
        <div id="calendar"class="calendarColumn">
            <asp:Table ID="TableMonthCalendar" runat="server" GridLines="Both" />
        </div>

        //The right button container
        <div class="calendarColumn">
            <asp:Button ID="btnRightMonth" runat="server" Text=">" 
                        onclick="btnRightMonth_Click" />  
        </div>
    </div>
</asp:Content>

and my CSS (probably worthless):
#calendarContainer {
  overflow:hidden;
  border: 1px solid black;
}
#calendarContainer .calendarColumn {
  padding-bottom: 1001em;
  margin-bottom: -1000em;
  border: 1px solid black;
  overflow:hidden;
  float:left;
}
#navigateButtonLeft {

}
#calendar {
  width: 80%;
}
#navigateButtonRight {

}

I previously used a table with a tr and three tds, but I couldn't get it to be the way I wanted. 
Here's an illustration of what I want to achieve, which is probably better than my explanation:

A:

You need to format the calendar and does columns with absolute position to place then where you pretend and avoid having layout breaks further on when adding additional contents:
Please see this Fiddle example! 
Read more about this type of solution:
CSS Position Property  |  CSS-Tricks - Fluid Width Equal Height Columns 
Notes:
On the Fiddle, check out the css part to see whats being done to positioning the elements to a proper place.  Also, the use of top and bottom allow the elements to go from top to bottom of their wrapper, in your case the wrapper is #calendarContainer. 

EDITED:
Second Fiddle Example with a main wrapper with no "coordinates". 

EDITED AGAIN
Another Fiddle Example using buttons styled as regular icons. 
Icons Used:
Arrow Left | Arrow Right

EDITED TO ADD LAST REQUEST FROM OP WITH BUTTONS TOP TO BOTTOM
The Fiddle Here!