How to align the image next to the text box with CSS?

advertisements

I am having difficulty in aligning an image next to a text box with CSS file.

I have tried this solution but the output is wrong, please check the code below and attached image.

Thank you.

aspx page:

                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="Date">Date</label>
                    <asp:TextBox ID="Date" runat="server" CssClass="pure-u-23-24"></asp:TextBox>
                    <img src="/Images/calen.gif" id="Img1" alt="Date" onmouseover="this.style.cursor='pointer'"
                        onmouseout="this.style.cursor='default'" class="image" />
                <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Date"
                    PopupButtonID="Img1" Format="dd/MM/yyyy" Animated="true"></ajaxToolkit:CalendarExtender>
                <asp:RequiredFieldValidator ID="RequiredFieldValidatorDate" runat="server" ControlToValidate="Date"
                    SetFocusOnError="true" ErrorMessage="Date" Text="*" Display="Dynamic" ValidationGroup="Validation4" CssClass="validation-summary-errors-one"></asp:RequiredFieldValidator>
                </div>

CSS file:

.image {
    position: relative;
    top: 6px;
}

Output in browser:

Edit #1

<img src="/Images/calen.gif" id="Date" alt="Date" onmouseover="this.style.cursor='pointer'"
    onmouseout="this.style.cursor='default'" style="float:left;" />


If you use the Control ajaxToolkit:CalendarExtender in Markup on the aspx page, why do you need an image and CSS (you need to know how to use them) to call the calendar ?

Change your code with this suggestion and you will simply need to click on the box to change the Date value.

Hope this helps!

    <div class="pure-u-1 pure-u-md-1-3">
        <label for="Date">Date</label>
        <asp:TextBox ID="Date" runat="server" CssClass="pure-u-23-24"></asp:TextBox>
    <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Date"
        Format="dd/MM/yyyy" Animated="true"></ajaxToolkit:CalendarExtender>
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorDate" runat="server" ControlToValidate="Date"
        SetFocusOnError="true" ErrorMessage="Date" Text="*" Display="Dynamic" ValidationGroup="Validation4" CssClass="validation-summary-errors-one"></asp:RequiredFieldValidator>
    </div>