CODEWITHSUNDEEP
htmlcss
Bob Stout
Bob Stout

Reputation: 1259

Align buttons across bottom of table cell

I have a page that consists of a table with two columns displaying event information with an "Edit" and "Delete" button. The event information has varying heights, but I want the buttons to be at the bottom regardless of the cell height.

<html>
<body>
    <form id="form1" name="form1">
        <!--input type="hidden" name="formType" id="formType" value="" />
        <input type="hidden" name="inpMonth" id="inpMonth" value="10" />
        <input type="hidden" name="inpDay" id="inpDay" value="" /-->
    </form>
    <div>
        <h1 style="background-color:darkblue; color: white; width:100%;text-align:center;">NOV 27, 2013</h1>
    </div>
    <div style="text-align: center;">
        <table style="width: 95%; border: thin black solid; border-collapse: collapse;">
            <tr>
                <td style="width:50%; border-right: thin black solid; border-bottom: thin black solid; 
                    border-collapse: collapse;">
                    <br>
                    <div style="margin-top: 10px; vertical-align: top;height: 100%;">
                        <label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
                        <label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
                        <label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
                        <label style="width: 100%;padding-left: 25px;">
                            Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.
                        </label>
                        <label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
                    </div>
                    <div style="padding-left:25%;" >
                            <button style="vertical-align: bottom;">Edit</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button>Delete</button>
                    </div>
                    <br>
                </td>
                <td style="width:50%; border-right: thin black solid; border-bottom: thin black solid; 
                    border-collapse: collapse;">
                    <br>
                    <div style="margin-top: 10px; vertical-align: top;height: 100%;">
                        <label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
                        <label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
                        <label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
                        <label style="width: 100%;padding-left: 25px;">
                            Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.Description: Job Fair for Veterans.  Description: Job Fair for Veterans.Description: Job Fair for Veterans.  Description: Job Fair for Veterans.Description: Job Fair for Veterans.  Description: Job Fair for Veterans.
                        </label>
                        <label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
                    </div>
                    <div style="padding-left:25%;" >
                            <button style="vertical-align: bottom;">Edit</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button>Delete</button>
                    </div>
                    <br>
                </td>
            </tr>
            <tr>
                <td style="width:50%; border-right: thin black solid; border-bottom: thin black solid; 
                    border-collapse: collapse;">
                    <br>
                    <div style="margin-top: 10px; vertical-align: top;height: 100%;">
                        <label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
                        <label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
                        <label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
                        <label style="width: 100%;padding-left: 25px;">
                            Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.
                        </label>
                        <label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
                    </div>
                    <div style="padding-left:25%;" >
                            <button style="vertical-align: bottom;">Edit</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button>Delete</button>
                    </div>
                    <br>
                </td>
                <td style="width:50%; border-right: thin black solid; border-bottom: thin black solid; 
                    border-collapse: collapse;">
                    <br>
                    <div style="margin-top: 10px; vertical-align: top;height: 100%;">
                        <label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
                        <label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
                        <label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
                        <label style="width: 100%;padding-left: 25px;">
                            Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.
                        </label>
                        <label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
                    </div>
                    <div style="padding-left:25%;" >
                            <button style="vertical-align: bottom;">Edit</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button>Delete</button>
                    </div>
                    <br>
                </td>

            </tr>
            <td colspan="2" style="border: thin black solid;text-align:center; background-color: lightgreen;">
                <br>
                <form>
                    <label style="width:100px; text-align: right;">Event Name:</label>&nbsp;&nbsp;<input type="text" style="width:250px;" value="" /><br>
                    <label style="width:100px; text-align: right;">Start Time:</label>&nbsp;&nbsp;<input type="text" style="width:250px;" value="" /><br>
                    <label style="width:100px; text-align: right;">End Time:</label>&nbsp;&nbsp;<input type="text" style="width:250px;" value="" /><br>
                    <label for="taDescription" style="width:100px; text-align: right;">Description:</label>&nbsp;&nbsp;<textarea id="taDescription" rows="3" style="width:250px; vertical-align:middle;"></textarea> <br>
                    <label style="width:100px; text-align: right;">Location:</label>&nbsp;&nbsp;<input type="text" style="width:250px;" value="" /><br>
                    <br>
                    <input type="submit" style="margin-left: 25%; margin-right:25%;" value="Add"/>
                </form>
            </td>                
        </table>
    </div>

</body>
</html>

Upvotes: 0

Views: 388

Answers (2)

j08691
j08691

Reputation: 208032

Position the div containing the buttons absolutely and at the bottom of the table cell, which should be positioned relatively.

td {
    position:relative;
}
.buttons {
    position:absolute;
    bottom:0;
}

jsFiddle example

Upvotes: 1

Bob Stout
Bob Stout

Reputation: 1259

Found the answer at Vertical align bottom for a link inside a table cell. By setting the td to "position: relative" and the div containing the buttons to "position: absolute; bottom:0", it moved the buttons where I wanted them.

The working html:

                    <td style="width:50%; border-right: thin black solid; border-bottom: thin black solid; 
                    border-collapse: collapse; position: relative;">
                    <br>
                    <div style="margin-top: 10px; vertical-align: top;height: 80%;">
                        <label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
                        <label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
                        <label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
                        <label style="width: 100%;padding-left: 25px;">
                            Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.
                        </label>
                        <label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
                    </div>
                    <div style="position: absolute; bottom:15;text-align: center; width: 100%;">

                            <button style="vertical-align: bottom;">Edit</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button style="vertical-align: bottom;">Delete</button>

                    </div>
                </td>

Upvotes: 0

Related Questions