fieldset's top border not showing up

Question

I have this below code in my html/css. I am looking for a design like this:

I used this http://jsfiddle.net/watson/Gsj27/3/ fiddle to work with to partition the fieldsets. But I am unable to show the top border of the fieldset.

<section style="width: 95%;">
   <div id="one">
      <fieldset style="border: solid; border-width: thin; height: 200px; border-color: #a8a8a8;">
         <legend id="Legend10" runat="server" visible="true" style="margin-bottom: 0px; font-size: 12px; font-weight: bold; color: #1f497d;">&nbsp;&nbsp; Project Summary &nbsp;&nbsp;</legend>
         <div style="margin-bottom: 10px; margin-left: 10px;">
         <asp:Table ID="table10" runat="server" CssClass="labels">
            <asp:TableRow>
               <asp:TableCell Style="width: 10%;">
                  Project ID: 
                  <asp:TextBox runat="server" Width="25px" Height="23px"></asp:TextBox>
               </asp:TableCell>
               <asp:TableCell Style="width: 40%;">
                  Project Name:<sup style="color:red; font-size:10pt;">*q</sup> 
                  <asp:TextBox runat="server" Width="90px" Height="23px"></asp:TextBox>
               </asp:TableCell>
            </asp:TableRow>
            <asp:TableRow>
               <asp:TableCell Style="width: 10%;">
                  Project ID: 
                  <asp:TextBox runat="server" Width="25px" Height="23px"></asp:TextBox>
               </asp:TableCell>
               <asp:TableCell Style="width: 40%;">
                  Project Name:<sup style="color:red; font-size:10pt;">*q</sup> 
                  <asp:TextBox runat="server" Width="90px" Height="23px"></asp:TextBox>
               </asp:TableCell>
            </asp:TableRow>
         </asp:Table>
         </div>
      </fieldset>
   </div>
   <div id="two">
      <fieldset style="border: solid; border-width: thin; height: 200px; border-color: #a8a8a8;">
         <legend id="Legend5" runat="server" visible="true" style="margin-bottom: 0px; font-size: 12px; font-weight: bold; color: #1f497d;"></legend>
         <div style="margin-bottom: 10px; margin-left: 10px;">
            <asp:Table ID="table11" runat="server" CssClass="labels">
               <asp:TableRow>
                  <asp:TableCell Style="width: 10%;">
                     Project ID: 
                     <asp:TextBox runat="server" Width="25px" Height="23px"></asp:TextBox>
                  </asp:TableCell>
                  <asp:TableCell Style="width: 40%;">
                     Project Name:<sup style="color:red; font-size:10pt;">*q</sup> 
                     <asp:TextBox runat="server" Width="90px" Height="23px"></asp:TextBox>
                  </asp:TableCell>
               </asp:TableRow>
               <asp:TableRow>
                  <asp:TableCell Style="width: 10%;">
                     Project ID: 
                     <asp:TextBox runat="server" Width="25px" Height="23px"></asp:TextBox>
                  </asp:TableCell>
                  <asp:TableCell Style="width: 40%;">
                     Project Name:<sup style="color:red; font-size:10pt;">*q</sup> 
                     <asp:TextBox runat="server" Width="90px" Height="23px"></asp:TextBox>
                  </asp:TableCell>
               </asp:TableRow>
            </asp:Table>
         </div>
      </fieldset>
   </div>
</section>

CSS:

.labels {
    font-size:9pt;
    font-weight:bold;
    font-family:Calibri;
}

section {
    width: 95%;
    height: 200px; 
    margin: auto;
    padding: 10px;
}
div#one {
    width: 47%;
    height: 200px; 
    float: left;
}
div#two { 
    height: 200px; 
}
fieldset legend {
    display: block;
    margin-left: 20px;
}

Solution 1

The legend needed width:auto. This solved the issue.

 <legend id="Legend5" runat="server" visible="true" style="width:auto; margin-bottom: 0px; font-size: 12px; font-weight: bold; color: #1f497d;">

Solution 2

Add width: auto to stylesheet. This will solve it.

width:auto;

Comments

[Akshay]

Really glad that helped cuz I was going mad over it as well.

[Daniel L. VanDenBosch]

to which css elem?