如何整齐排列HTML

我不会做太多的HTML。但是我需要像WinForms一样以精确的方式布局表单。反正这里是使用小CSS和HTML我知道我的最好的尝试：如何整齐排列HTML

enter image description here

问题是，白色区域内的一切绝对是奠定了...所以每次我添加新的内容我必须调整所有周围的元素一起玩。另外，当我从ASP.NET代码隐藏中填充checkboxlist内容时，我并不总是知道会有多少项，所以白色框有时太短...所以我通过手动修复CSS中的新高度来解决此问题你知道的坏方式。

请你能告诉我我应该怎么做SHOULD？

CSS：

body 
{ 
    margin: 0px; 
    font-family: sans-serif; 
    font-size: 13px; 
    color: #111; 
    background: #c4c4c4 url("bgd.jpg"); 
} 

#header 
{ 
    height: 80px; 
    background-color: #333; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); 
    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.3); 
} 

#wrapper 
{ 
    padding: 20px 20px 20px 20px; 
    height: auto; 
} 

#footer 
{ 
    height: 40px; 
    background-color: #333; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); 
    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.3); 
} 

#copyright 
{ 
    font-size: smaller; 
    position: relative; 
    top: 13px; 
    color: #eee; 
    text-shadow: 1px 1px #666; 
    text-align: center; 
} 

.block 
{ 
    margin: 0 auto; 
    width: 440px; 
    background-color: white; 
    border-radius: 6px; 
    box-shadow: 3px 3px 3px #888888; 
} 

.block > * 
{ 
    position: relative; 
} 

#login 
{ 
    width: 215px; 
    height: 170px; 
} 

#login h2 
{ 
    background: #353; 
} 

#controlpanel 
{ 
    width: 235px; 
    height: 175px; 
} 

#controlpanel h2 
{ 
    background: rgb(165,0,0); 
} 

#options 
{ 
    width: 273px; 
    height:auto; 
} 

#options h2 
{ 
    background: royalblue; 
} 

.block h2 
{ 
    padding: 10px 15px; 
    color: white; 
    background: #261F1F; 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
} 

h1, h2, h3 
{ 
    color: #111111; 
    margin: 0px; 
} 

h1 
{ 
    color: white; 
    position: absolute; 
    top: 15px; 
    left: 15px; 
    font-size: 40px; 
} 

h2 
{ 
    font-size: 22px; 
} 

a:link, a:visited, a:hover, a:active 
{ 
} 

a 
{ 
    -moz-outline: none; 
} 

hr 
{ 
    background: #dddddd; 
    color: #dddddd; 
} 

.button 
{ 
    font-weight: bold; 
    font-size: 11px; 
    height: 27px; 
    color: #111111; 
    padding: 2px 5px; 
    background: url('btnbgd.png') top; 
    border: 1px solid #C3C4BA; 
    border-radius: 3px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    cursor: pointer; 
} 

.textbox 
{ 
    height: 25px; 
    padding: 0px 3px 0px 3px; 
    margin: 0; 
    border: 1px solid #DDD; 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); 
} 

.label 
{ 
    text-shadow: 2px 2px 2px #eee; 
} 

select 
{ 
    border: 1px solid #C3C4BA; 
    border-radius: 3px; 
    height: 25px; 
} 

.groupbox 
{ 
    text-shadow: 2px 2px 2px #eee; 
    left: 12px; 
    width: 250px; 
} 

fieldset 
{ 
    border-radius: 3px; 
} 

.groupbox legend 
{ 
    text-shadow: none; 
    padding: 2px 4px 2px 4px; 
    color: white; 
    background-color: #C3C4BA; 
    border-radius: 3px; 
} 

#MainContentPlaceHolder_pnlXRefs legend 
{ 
    text-shadow: none; 
    padding: 2px 4px 2px 4px; 
    color: white; 
    background-color: red; 
    border-radius: 3px; 
} 

.footer 
{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    height: 40px; 
    background-color: #575654; 
}

HTML：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Options.aspx.cs" Inherits="Portal.Options" 
    MasterPageFile="Portal.Master" Title="Price File Options" %> 

<asp:Content runat="server" ContentPlaceHolderID="MainContentPlaceHolder"> 
    <div class="block" id="options"> 
     <h2> 
      Options</h2> 
     <asp:Label runat="server" Text="Acc No :" Style="top: 15px; left: 15px;" CssClass="label" /> 
     <asp:TextBox ID="txtAccNo" runat="server" Style="top: 15px; left: 15px; width: 110px" 
      CssClass="textbox" /> 
     <asp:Button ID="btnGetColours" Style="top: 15px; left: 15px" CssClass="button" runat="server" 
      Text="Refresh" onclick="btnGetColours_Click" /> 
     <asp:Panel ID="pnlBrembo" runat="server" GroupingText="BREMBO" Style="top: 25px;" 
      CssClass="groupbox"> 
      <asp:CheckBoxList ID="lstBrembo" runat="server" /> 
     </asp:Panel> 



     <asp:Label ID="Label1" runat="server" Text="Email :" Style="top: 85px; left: 15px;" CssClass="label" /> 
     <asp:TextBox ID="txtEmail" runat="server" Style="top: 85px; left: 24px; width: 185px" 
      Text="[email protected]" CssClass="textbox" /> 

     </br> 
     <asp:Button ID="btnGenerate" Style="top: 100px; left: 12px" CssClass="button" runat="server" 
      Text="Generate & Send" OnClick="btnGenerate_Click" /> 
    </div> 
</asp:Content>

UPDATE 1：

服用高度之后：2000像素;出，甚至将其更改为auto白牌我会在底部的一些控制推出的白色盒子：

enter image description here