Good day,
I am facing a challenge with my parent div not wrapping around its controls, even though it seems like a simple task.
The yellow small box serves as the parent DIV, and the controls (Label, DropDownList) are contained within it. However, the box is not properly wrapping around them, as visible in the code snippet below:
<div id="divCUSTOMER_INSURED_PARTY__TITLE_ID__1" runat="server" class="form-group questionRow"
clientidmode="Static">
<asp:Label ID="Label1" runat="server" AssociatedControlID="CUSTOMER_INSURED_PARTY__TITLE_ID__1"
CssClass="control-label col-md-4">Title</asp:Label>
<div class="col-md-4 form-group fixedControl">
<asp:DropDownList ID="CUSTOMER_INSURED_PARTY__TITLE_ID__1" runat="server" CssClass="form-control"
ListTable="LIST_TITLE" TopItems="">
</asp:DropDownList>
<div class="help">
</div>
<div class="validator">
<asp:RequiredFieldValidator ID="reqCUSTOMER_INSURED_PARTY__TITLE_ID__1" runat="server"
ControlToValidate="CUSTOMER_INSURED_PARTY__TITLE_ID__1" Display="Dynamic" InitialValue="0"
ValidationGroup="">
<div class="alert alert-danger">Please Complete.</div>
</asp:RequiredFieldValidator></div>
</div>
</div>
The "divCUSTOMER_INSURED_PARTY__TITLE_ID__1" acts as the parent div where everything else resides.
Below is my CSS Code:
.form-group {margin-bottom: 0px}
.questionRow {padding: 3px; border: 0px none #FFF; padding-left: 10px; padding-right: 10px;}
Has anyone encountered this issue before?
SOLUTION:
To resolve this, I added the following at the bottom of my parent DIV:
<div class="clear"></div>
In my CSS file, I included this styling:
.clear{clear:both}
Implementing these changes successfully ensured that the DIV wrapped around all elements correctly.
Thank you for your assistance.