Question

I have a apsx page and in that page I have two buttons called save and cancel, i need to display this with some css style, my script is

<table>
<tr>
    <td align="right" class="bar">
        <table>
            <tr>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save"/>
                </td>
                <td>
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                </td>
            </tr>
        </table>
    </td>
</tr>   

and my css script is

.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}

and am getting the style as

I have few more controls above these save and cancel buttons…the problems is this save and cancel buttons with the bar style comes right after the controls above them….

now these buttons are displaying at the center of the page and I need to display these save and cancel buttons with the bar style at the bottom of the page….how can I do this..

note:I put the position:absolute, it will disturb the alignments in other forms, coz am using this same bar style in all my forms……in other forms I have the controls that fills the page and automatically the save cancel buttons are coming at the bottom, but here I have only 4 controls…so the save and cancel button is at center, thats what am trying to display at the buttom

Answer 1

Here’s the solution in JSFiddle:

http://jsfiddle.net/SX7n3/6/

For one, lose the table…

<div id="content">
    Hello World!
</div>

<div class="clear">&#160;</div>

<div class="bar">
    <div class="buttons">    
          <button type="button" id="submit">Submit</button>
          <button type="button" id="cancel">Cancel</button>
    </div>    
</div>    

.content
{
    min-height:800px;
    width: 100%;
}

.bar
{
    padding-top: 4px;
    border-width: 1px;
    border-color: #000;
    background-color: #ccc;
    height: 30px;
    border-style: solid;
}

.buttons
{
    float: right;        
}

.clear
{
    clear: both;
}