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;"> Project Summary </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;
}
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;">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With