My border is only bordering the H2 element in my div

Question

This is the code from my asp.net application, and below is the CSS I have so far.

The problem I'm having is that the border I have is only covering the H2 element in my application. What I want is for the border to cover everything within the "persInfo" div, but it's not doing this and I cannot figure out why.

When I use "split" in Visual Studio it shows the border covering everything, but when I run it, it's only covering the H2 element.

#persInfo {
  border: 3px solid;
  border-radius: 25px;
}
#lblWrapper {
  width: 50%;
  float: left;
}
#tbxWrapper {
  width: 50%;
  float: right;
}
.lbl {
  display: block;
  margin-top: 9px;
  margin-left: 20px;
}
.tbx {
  display: block;
  margin-top: 6px;
}

<div id="persInfo">
  <h2>Personal Information</h2>
  <div id="lblWrapper">
    <asp:Label ID="Label7" runat="server" Text="First name" CssClass="lbl"></asp:Label>
    <asp:Label ID="Label2" runat="server" Text="Surname" CssClass="lbl"></asp:Label>
    <asp:Label ID="Label3" runat="server" Text="Email" CssClass="lbl"></asp:Label>
    <asp:Label ID="Label4" runat="server" Text="Confirm Email" CssClass="lbl"></asp:Label>
    <asp:Label ID="Label5" runat="server" Text="Password" CssClass="lbl"></asp:Label>
    <asp:Label ID="Label6" runat="server" Text="Confirm Password" CssClass="lbl"></asp:Label>
  </div>
  <div id="tbxWrapper">
    <asp:TextBox ID="tbxFname" runat="server" CssClass="tbx"></asp:TextBox>
    <asp:TextBox ID="tbxSname" runat="server" CssClass="tbx"></asp:TextBox>
    <asp:TextBox ID="tbxEmail" runat="server" CssClass="tbx"></asp:TextBox>
    <asp:TextBox ID="tbxEmail2" runat="server" CssClass="tbx"></asp:TextBox>
    <asp:TextBox ID="tbxPass" runat="server" CssClass="tbx"></asp:TextBox>
    <asp:TextBox ID="tbxPass2" runat="server" CssClass="tbx"></asp:TextBox>
  </div>
</div>

You haven't cleared the floats. – Paulie_D Nov 06 '15 at 16:14 — Paulie_D, Nov 06 '15 at 16:14
Thanks Paulie, it's always something simple, fixed. – BoogaWooga Nov 06 '15 at 16:22 — BoogaWooga, Nov 06 '15 at 16:22

score 0 · Accepted Answer · edited May 23 '17 at 12:15

0

Elements that only contain floated elements will collapse.

You will need to "clear" the floats.

For a variety of so-called "clearfix" options, see this Question

edited May 23 '17 at 12:15

Community

1
1

answered Nov 06 '15 at 16:17

Paulie_D

107,962
13
142
161

My border is only bordering the H2 element in my div

1 Answers1