Html Alignment in .aspx page.

Hi I am not good in Html alignment. Can you please help me. I want make some space between two button (add, cancel  button).(Please see the image) I tried ti fix it but no luck. Please help me.

<table style="background-color: #F5F5E9" cellspacing="2">
                                                                                    <tr>
                                                                                        <td align="left" style="width: 70px;">
                                                                                            Note Type
                                                                                        </td>
                                                                                        <td align="left" style="width: 82px; height: 24px;">
                                                                                            <telerik:RadComboBox ID="ddlNoteType" EmptyMessage="Please select" runat="server"
                                                                                                MarkFirstMatch="True" CollapseDelay="0" Width="115px" DropDownWidth="100px" AllowCustomText="True">
                                                                                                <CollapseAnimation Duration="0" />
                                                                                            </telerik:RadComboBox>
                                                                                            <asp:RequiredFieldValidator InitialValue="" ValidationGroup="Notes" ID="custValCou"
                                                                                                runat="server" ControlToValidate="ddlNoteType" ClientValidationFunction="ddlNt"
                                                                                                Display="None" ErrorMessage="Please select Note Type."></asp:RequiredFieldValidator>
                                                                                            <cc2:ValidatorCalloutExtender ID="valExt" TargetControlID="custValCou" runat="server"
                                                                                                Enabled="True">
                                                                                            </cc2:ValidatorCalloutExtender>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td align="left" valign="middle" style="width: 70px;">
                                                                                            Notes
                                                                                        </td>
                                                                                        <td align="left">
                                                                                            <asp:TextBox ID="txtNoteDesc" runat="server" TextMode="MultiLine" Rows="3" Width="570px"></asp:TextBox>
                                                                                            <asp:RequiredFieldValidator ID="valCliID" ValidationGroup="Notes" ControlToValidate="txtNoteDesc"
                                                                                                Display="None" runat="server" ErrorMessage="Please enter Notes."></asp:RequiredFieldValidator>
                                                                                            <cc2:ValidatorCalloutExtender ID="ValidatorCalloutExtender19" TargetControlID="valCliID"
                                                                                                runat="server">
                                                                                            </cc2:ValidatorCalloutExtender>
                                                                                            &nbsp;&nbsp;
                                                                                        </td>
                                                                                        <td valign="top">
                                                                                            <span style="padding-bottom: 4px;">
                                                                                                <asp:Button ID="btnAddNote" Width="60px" OnClick="btnAddNote_Click" ValidationGroup="Notes"
                                                                                                    runat="server" Text="Add" /></span>
                                                                                            <asp:Button ID="imgbtnNotesCancel" Width="60px" runat="server" OnClientClick="return  hideAddNotes()"
                                                                                                Text="Cancel" />
                                                                                        </td>
                                                                                    </tr>
                                                                                </table>

Open in new window

1.JPG
prasadpbrAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
prasadpbrConnect With a Mentor Author Commented:
its working ... instead of span i used div. Thanks
0
 
aboredmanCommented:
As a best practice you should use div tags and a CSS to layout your page, not tables.

You can have pretty good tutorials at: http://www.w3schools.com/css/default.asp

good luck
0
 
MikeMCSDCommented:
start with added one <br /> and see what that does:
 </td>
<td valign="top">
<span style="padding-bottom: 4px;">
<asp:Button ID="btnAddNote" Width="60px" OnClick="btnAddNote_Click"
ValidationGroup="Notes" runat="server" Text="Add" /></span>

<br />      <<<< add here

<asp:Button ID="imgbtnNotesCancel" Width="60px" runat="server" OnClientClick="return  hideAddNotes()" Text="Cancel" />
</td>
                                                                                    </tr>
                                                                                </table>
0
 
MikeMCSDCommented:
or try making the "<span style="padding-bottom: 4px;">"
larger to like 12px or more :

</td>
<td valign="top">

<span style="padding-bottom: 4px;">   <<< increase to 12px and up

<asp:Button ID="btnAddNote" Width="60px" OnClick="btnAddNote_Click"
ValidationGroup="Notes" runat="server" Text="Add" /></span>
<asp:Button ID="imgbtnNotesCancel" Width="60px" runat="server" OnClientClick="return  hideAddNotes()" Text="Cancel" />
</td>
                                                                                    </tr>
                                                                                </table>
0
 
codingbeaverCommented:
Try to increase the width of the last <td> so that it has enough space for the "Cancel" button to stay on the same line as the "Add" button. If you don't have enough space, then the "Cancel" button will be wrapped to the next line.
0
All Courses

From novice to tech pro — start learning today.