Above is a picture of the problem I am having. Ideally, I want that calendar image on the right side of the text box. I know the CSS is causing the issue, but I am using a template and not sure how to counteract the CSS. I don't want to change it, but prefer to simply wrap the image in a div or span to cause it to display correctly. Here is the HTML and CSS.
CODE
.contact-form {
position: relative;
vertical-align: top;
z-index: 1;
margin: 0;
top: -10px;
}
.contact-form .txt-form {
display: none;
}
.contact-form .coll-1, .contact-form .coll-2, .contact-form .coll-3 {
margin-bottom: 23px;
float: left;
width: 200px;
}
.contact-form .coll-1 p, .contact-form .coll-2 p, .contact-form .coll-3 p {
margin-bottom: 3px;
}
.contact-form .coll-1, .contact-form .coll-2 {
margin-right: 10px;
}
.contact-form fieldset {
top: 9px;
border: none;
padding: 0;
width: 100%;
position: relative;
z-index: 10;
}
.contact-form label {
display: block;
min-height: 45px;
position: relative;
margin: 0;
padding: 0;
float: left;
width: 100%;
}
<div id="contact-form" class="contact-form">
<fieldset>
<div class="coll-2">
<p>Due Date*</p>
<label class="bidduedate">
<asp:TextBox ID="txtBidDueDate" runat="server"></asp:TextBox><asp:ImageButton ID="imgPopup" ImageUrl="/img/calendar.png" ImageAlign="Middle" runat="server" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" PopupButtonID="imgPopup" runat="server" TargetControlID="txtBidDueDate" Format="MM/dd/yyyy">
</ajaxToolkit:CalendarExtender></label>
</div>
</fieldset>
</div>