I am attempting to create a layout with three columns. The left and right columns will each contain a button that should remain aligned with the outer border of the container. In the center column, there will be an asp:Table generated dynamically, ranging from 1 row and 1 column to 6 rows and 7 columns.
I have tried to reference this CSS example, which led me to this site: http://www.alistapart.com/d/holygrail/example_3.html. While I have managed to get the divs to display side by side, I'm struggling to vertically align the left and right columns or make them equal in height with the center div tag, which may essentially be the same issue.
I am not certain if it is relevant, but my divs are within a ContentPlaceHolder on an ASP Page.
This is the code snippet:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
//Container for the three columns
<div id="calendarContainer">
//Left button container
<div id="navigateButtonLeft" class="calendarColumn">
<asp:Button ID="btnLeftMonth" runat="server" Text="<"
onclick="btnLeftMonth_Click" />
</div>
//Table/month-calendar container
<div id="calendar"class="calendarColumn">
<asp:Table ID="TableMonthCalendar" runat="server" GridLines="Both" />
</div>
//Right button container
<div class="calendarColumn">
<asp:Button ID="btnRightMonth" runat="server" Text=">"
onclick="btnRightMonth_Click" />
</div>
</div>
</asp:Content>
My probably futile attempt at 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 {
}
Initially, I employed a table structure with a tr and three tds, but it did not meet my requirements.
Below is a visual representation of my objective, which may clarify things better than my description: