Question

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:

Answer 1

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!