asp.net - 在ASP.NET的ContentPlaceHolder内部以相等的列高并排放置Divs

我试着有三列。左右列包含一个按钮，这些按钮应与容器的外部边框保持固定对齐。中间列包含一个动态创建的asp:Table，包含从1行1列到6行7列的所有内容。
我试着跟随this CSS example这最终成为这个网站：http://www.alistapart.com/d/holygrail/example_3.html，我得到了div并排-但我不能让左右列垂直对齐或与中心div标签有相同的高度，我猜这是相同的事情。
我不知道这是否重要，但我的div在ASPContentPlaceHolder的Page中。
这是我的代码：

<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>

还有我的CSS（可能毫无价值）：

#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 {

}

我以前用过atable加atr和3tds，但我没能达到我想要的效果。
以下是我想要达到的目标的一个例子，这可能比我的解释要好：

最佳答案

您需要格式化日历，并在列中放置绝对位置，然后在添加其他内容时假装并避免布局进一步中断：
请看这个Fiddle example!
阅读有关此类型解决方案的详细信息：
CSS Position Property|CSS-Tricks - Fluid Width Equal Height Columns
笔记：
在Fiddle上，查看css部分，了解如何将元素定位到正确的位置。此外，top和bottom的使用允许元素从包装器的顶部到底部，在您的情况下，包装器是#calendarContainer。
编辑：
第二个Fiddle Example带有没有“坐标”的主包装。
再次编辑
另一个Fiddle Example使用常规图标样式的按钮。
使用的图标：
Arrow Left|Arrow Right
编辑以添加来自OP的最后一个请求，按钮从上到下
小提琴Here!

关于asp.net - 在ASP.NET的ContentPlaceHolder内部以相等的列高并排放置Divs，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10514842/