верхняя граница сайта не отображается

Question

У меня этот код ниже в моем html/css. Я ищу такой дизайн:

Я использовал этот http://jsfiddle.net/watson/Gsj27/3/ скрипт для работы с разделяющими полями. Но я не могу показать верхнюю границу поля.

<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; 
} 

Answer 1

Легенда необходима ширина: авто. Это решило проблему.

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

Answer 2

попробовать этот

CSS

<style> 
.verticalLine { 
    border-left: thick solid #ff0000; 
      height: 143px; 
     } 
    .labels { 
    font-size:9pt; 
    font-weight:bold; 
    font-family:Calibri; 
} 

section { 
    width: 95%; 
    height: 200px; 
    margin: auto; 
    padding: 10px; 
} 
div#one { 
    width: 45%; 
    height: 200px; 

} 
div#two 
{ 
    width: 45%; 
    height: 200px; 
    float: right; 
} 
    </style> 

HTML

<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> 
           <table border="1"> 
           <tr> 
           <td> 
           <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 ID="TextBox5" 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 ID="TextBox6" runat="server" Width="90px" Height="23px"></asp:TextBox> 
              </asp:TableCell> 
             </asp:TableRow> 
             <asp:TableRow> 
              <asp:TableCell Style="width: 10%;"> 
                Project ID: 
                <asp:TextBox ID="TextBox7" 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 ID="TextBox8" runat="server" Width="90px" Height="23px"></asp:TextBox> 
              </asp:TableCell> 
             </asp:TableRow> 
            </asp:Table> 
           </div> 
           </td> 
           <td> 
           <div class="verticalLine"> 

</div> 
           </td> 
           <td> 
            <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 ID="TextBox1" 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 ID="TextBox2" runat="server" Width="90px" Height="23px"></asp:TextBox> 
              </asp:TableCell> 
             </asp:TableRow> 
             <asp:TableRow> 
              <asp:TableCell Style="width: 10%;"> 
                Project ID: 
                <asp:TextBox ID="TextBox3" 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 ID="TextBox4" runat="server" Width="90px" Height="23px"></asp:TextBox> 
              </asp:TableCell> 
             </asp:TableRow> 
            </asp:Table> 
           </div> 
           </td> 
           </tr> 
           </table> 





          </fieldset> 
         </div> 

         </div> 

        </section>