工字型布局是Web中應用比較廣泛的布局，它將整個(gè)頁(yè)面分成頁(yè)頭，側面導航欄，內容欄和頁(yè)腳欄四部分，頁(yè)頭一般包括logo，網(wǎng)站標題等；側面導航欄是導航菜單,根據客戶(hù)的喜好可以放在左邊也可以放在右邊；內容是正文部分，左右也可以根據用戶(hù)的喜好放置；頁(yè)腳包括版權信息，聯(lián)系我們等。具體形式見(jiàn)下圖。
固定兩欄方式和可變兩欄方式
根據content欄的寬度是否會(huì )隨著(zhù)瀏覽器的寬度改變可以將工字型布局分為固定兩欄方式和可變兩欄方式，請見(jiàn)圖。
可變兩欄式布局制法工字型布局中，header和footer很好實(shí)現，而sidebar和content相對麻煩一些，我的做法是將它們放在一行兩列的表格中，左列寬度卡死，右邊不設置寬度，并讓表格充滿(mǎn)其父div。代碼如下，注意其中表格的樣式設置，它確保了超過(guò)td寬度的內容折行顯示，這樣就不會(huì )讓內容強行把表格撐開(kāi)了：
<body>
<div id="bodyDiv">
<div id="header">
<jsp:include page="/web/page/branch/header.jsp"/>
</div>
<div id="menubar">
<jsp:include page="/web/page/branch/menubar.jsp"/>
</div>
<div id="contentDiv">
<table border="0" width="100%" height="100%" style=";word-wrap:break-word;word-break;break-all;">
<tr>
<td width="200" valign="top">
<div id="content">
內容欄
</div>
</td>
<td valign="top">
<div id="sideBar">
菜單欄
</div>
</td>
</tr>
</table>
</div>
<div id="footer">
<jsp:include page="/web/page/branch/footer.jsp"/>
</div>
</div>
</body>
固定兩欄方式的制法
固定兩欄方式需要在div的寬度和浮動(dòng)上動(dòng)一下手腳，具體來(lái)說(shuō)就是content的寬度加上siderbar的寬度要等于它們所在的父元素的寬度，另外content向左浮動(dòng)，siderbar向右浮動(dòng)。這樣content和siderbar兩個(gè)div就不會(huì )獨占一行了，代碼如下。
HTML代碼：
<body>
<div id="bodyDiv">
<div id="header">
<jsp:include page="/web/page/branch/header.jsp"/>
</div>
<div id="menubar">
<jsp:include page="/web/page/branch/menubar.jsp"/>
</div>
<div id="contentDiv">
<div id="content">
左側菜單欄
</div>
<div id="sidebar">
右側導航欄
</div>
</div>
<div id="footer">
<jsp:include page="/web/page/branch/footer.jsp"/>
</div>
</div>
</body>
CSS代碼，注意contentDiv中也有防止Div被過(guò)寬內容撐開(kāi)的代碼：
#bodyDiv{}{
width:780;
}
#contentDiv{}{
width:100%;
height:500px;
}
#content{}{
table-layout: fixed;
word-wrap: break-word;
overflow: hidden;
width:580px;
height:100%;
float:left;
}
#sidebar{}{
width:200px;
height:100%;
float:left;
background:#292929;
} 
