Page Div對齊顯示不正確

Question

我有一個奇怪的情況，並認爲它必須很容易幫助我解決這個特定的問題。我有一個子頁面上有兩個div，我想彼此相鄰顯示。我的意思是，一個在左邊，一個在右邊。之後，在屏幕的底部我想顯示一個覆蓋100％寬度的表格。

我已經在一個div上使用了float，並在另一個div上浮動。然後我在底部顯示錶格的標題，然後顯示錶格。
我的問題是，儘管我所有的努力標題顯示在這兩個div之間。這是我的代碼。

<div id="ContainerDiv" runat="server" style="width: 930px"> 
     <div id="DivticketDetails" runat="server" visible="false" 
      style="float: left; width: 400px;"> 
      <asp:Panel ID="PanelTicketDetails" runat="server" BackColor="#8B9FBE"> 
       <h3 style="color: #FFFFFF; font-weight: bold; text-decoration: underline;"> 
        Bowzer Details</h3> 
       <table border="1" cellpadding="0" cellspacing="0" class="myTable"> 
        <tr> 
         <td bgcolor="#507CD1"> 
          <asp:Label ID="Label6" runat="server" Text="Field/Customer Name" Font-Bold="True" 
           Font-Size="XX-Small" BorderColor="#507CD1" ForeColor="White"></asp:Label> 
         </td> 
         <td> 
          <asp:Label ID="lbl_FieldName" runat="server" Text="lbl_FieldName" CssClass="myLabel"></asp:Label> 
         </td> 
        </tr> 
        <tr> 
         <td bgcolor="#507CD1"> 
          <asp:Label ID="Label3" runat="server" Text="Challan Generated On" Font-Bold="True" 
           Font-Size="XX-Small" BorderColor="#507CD1" ForeColor="White"></asp:Label> 
         </td> 
         <td> 
          <asp:Label ID="lbl_firstEntryDate" runat="server" Text="lbl_firstEntryDate" Font-Size="Small" 
           CssClass="myLabel"></asp:Label> 
         </td> 
        </tr> 
        <tr> 
         <td bgcolor="#507CD1"> 
          <asp:Label ID="Label4" runat="server" Text="Product Name" Font-Bold="True" Font-Size="XX-Small" 
           BorderColor="#507CD1" ForeColor="White"></asp:Label> 
         </td> 
         <td> 
          <asp:Label ID="lbl_ProductName" runat="server" Text="lbl_ProductName" Font-Size="Small" 
           CssClass="myLabel"></asp:Label> 
         </td> 
        </tr> 
        <tr> 
         <td bgcolor="#507CD1"> 
          <asp:Label ID="Label2" runat="server" Text="Bowzer No" Font-Bold="True" Font-Size="XX-Small" 
           BorderColor="#507CD1" ForeColor="White"></asp:Label> 
         </td> 
         <td> 
          <asp:Label ID="lbl_bowzerNo" runat="server" Text="lbl_bowzerNo" Font-Size="Small" 
           CssClass="myLabel"></asp:Label> 
         </td> 
        </tr> 
        <tr> 
         <td bgcolor="#507CD1"> 
          <asp:Label ID="Label28" runat="server" Text="Quantity" Font-Bold="True" Font-Size="XX-Small" 
           BorderColor="#507CD1" ForeColor="White"></asp:Label> 
         </td> 
         <td> 
          <asp:Label ID="lbl_BowQuantity" runat="server" Text="lbl_BowQuantity" Font-Size="Small" 
           CssClass="myLabel"></asp:Label> 
         </td> 
        </tr> 
       </table> 
      </asp:Panel> 
     </div> 
     <div id="Div2" runat="server" style="float: right; width: 429px;"> 
      <asp:Panel ID="PanelBowzerHistory" runat="server" BackColor="#8B9FBE" Visible="False"> 
       <h3 style="font-weight: bold; text-decoration: underline; color: #FFFFFF"> 
        Bowzer History 
       </h3> 
       <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" 
        DataKeyNames="challan_id" DataSourceID="DSBowzerHistory" Font-Size="Smaller" 
        ForeColor="#333333" GridLines="None" AllowPaging="True" PageSize="4"> 
        <AlternatingRowStyle BackColor="White" /> 
        <Columns> 
         <asp:BoundField DataField="FirstWeight" HeaderText="FirstWeight" SortExpression="FirstWeight" /> 
         <asp:BoundField DataField="Firstentry_date" HeaderText="Firstentry_date" SortExpression="Firstentry_date" /> 
         <asp:BoundField DataField="SecondWeight" HeaderText="SecondWeight" SortExpression="SecondWeight" /> 
         <asp:BoundField DataField="netWeight" HeaderText="netWeight" SortExpression="netWeight" /> 
         <asp:BoundField DataField="SecondEntry_Date" HeaderText="SecondEntry_Date" SortExpression="SecondEntry_Date" /> 
         <asp:BoundField DataField="challan_id" HeaderText="challan_id" InsertVisible="False" 
          ReadOnly="True" SortExpression="challan_id" /> 
        </Columns> 
        <EditRowStyle BackColor="#2461BF" /> 
        <FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True" /> 
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> 
        <RowStyle BackColor="#EFF3FB" /> 
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> 
        <SortedAscendingCellStyle BackColor="#F5F7FB" /> 
        <SortedAscendingHeaderStyle BackColor="#6D95E1" /> 
        <SortedDescendingCellStyle BackColor="#E9EBEF" /> 
        <SortedDescendingHeaderStyle BackColor="#4870BE" /> 
       </asp:GridView> 
      </asp:Panel> 
     </div> 
    </div> 

    <div id="tblDetailsDiv" runat="server" visible="False" title="Ticket Details" style="width: 930px; 
     background-color: #8B9FBE;"> 
       <h3 style="font-size: medium; color: #FFFFFF; font-weight: bold; width: 930px; background-color: #00FF00;"> 
       Enter Details Here</h3> 
      <table id="tblDetails" title="Enter Details" border="0" cellpadding="0" cellspacing="0" 
       class="myTable" frame="border"> 
       <tr> 
        <td> 

        </td> 
        <td> 
</table> 
</div> 

這是它是如何顯示的。

Answer 1

嘗試第二次DIV的浮動改爲左，這兩個DIV之後。 像這樣：

而那些兩個div後添加一個新的div有明確的風格。

希望它有效。

這裏你去。我添加了上面的代碼