บรรทัดเดียวและคอลัมน์ด้านล่างคือเครื่องหมายคำพูด:
เนื้อความ { ระยะขอบ: 0px; ช่องว่างภายใน: 0px;
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
ต่อไปนี้เป็นส่วนของเครื่องหมายคำพูด:
เนื้อความ { ระยะขอบ: 0px; การขยายข้อความ: 0px;
#content-top { ขอบซ้าย:อัตโนมัติ; ความกว้าง: 400px;
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
ต่อไปนี้เป็นส่วนของเครื่องหมายคำพูด:
เนื้อความ { ระยะขอบ: 0px; ช่องว่างภายใน: 0px;
#content-top { ขอบซ้าย:อัตโนมัติ; ความกว้าง: 400px
; ; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
แถวเดียวและสองคอลัมน์ ต่อไปนี้เป็นส่วนของเครื่องหมายคำพูด:
#bodycenter { ความกว้าง: 700px; ขอบขวา: อัตโนมัติ; ขอบซ้าย: อัตโนมัติ; ล้น: อัตโนมัติ;
#bodycenter #dv1 {ลอย: ซ้าย; ความกว้าง: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
สองแถวและสองคอลัมน์ ต่อไปนี้เป็นส่วนของเครื่องหมายคำพูด:
#header{ ความกว้าง: 700px; ขอบขวา: อัตโนมัติ; ขอบซ้าย: อัตโนมัติ; ล้น: อัตโนมัติ;}
#bodycenter { ความกว้าง: 700px; ขอบขวา: อัตโนมัติ;
#bodycenter #dv1 { ลอย: ซ้าย; ความกว้าง: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
สามแถวและสองคอลัมน์ ต่อไปนี้เป็นส่วนของเครื่องหมายคำพูด:
#header{ ความกว้าง: 700px; ขอบขวา: อัตโนมัติ;
#bodycenter {ความกว้าง: 700px; ขอบซ้าย: อัตโนมัติ;
#bodycenter #dv1 { ลอย: ซ้าย; ความกว้าง: 280px;}
#bodycenter #dv2 { ลอย: ขวา; ความกว้าง: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
การวางตำแหน่งสัมบูรณ์ของแถวเดียวและสามคอลัมน์:
#left { ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ความกว้าง: 120px;
#middle {ระยะขอบ: 20px 190px 20px 190px;
#right {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ความกว้าง: 120px;}
การวางตำแหน่งลอย
xhtml:
นี่คือคำพูด:
<div id="warp"> <div id="column"> <div id="column1">นี่คือคอลัมน์แรก</div> <div id="column2">นี่คือคอลัมน์ที่สอง</div> <div class="clear"></div> </div> <div id="column3">นี่คือคอลัมน์ที่สาม</div> <div class="clear"></div> </div>
CSS : :
นี่คือคำพูด:
#wrap{ ความกว้าง:100%; ความสูง:อัตโนมัติ;}
#column { ลอย: ซ้าย; ความกว้าง: 60%;}
# คอลัมน์ 1 { ลอย: ซ้าย; ความกว้าง: 30%;}
# คอลัมน์ 2 { ลอย: ขวา; ความกว้าง: 30%;}
# คอลัมน์ 3 { ลอย: ขวา; ความกว้าง: 40%;}
.clear{ clear:both;}
ลอยตำแหน่งสอง
xhtml:
ต่อไปนี้เป็นส่วนที่ยกมา: <div id="center" class="column"> <h1>นี่คือเนื้อหาหลัก</h1> </div> <div id="left" class="column"> <h2 >นี่คือแถบด้านข้างทางซ้าย</h2> </div> <div id="right" class="column"> <h2>นี่คือแถบด้านข้างทางขวา</h2> </div>
CSS:
นี่คือคำพูด:
เนื้อความ {ระยะขอบ: 0; ช่องว่างภายในซ้าย: 200px; ช่องว่างภายในด้านขวา: 190px; ความกว้างขั้นต่ำ: 240px;}
.column {ตำแหน่ง: ญาติ;ลอย: ซ้าย;}
#center {ความกว้าง: 100%;}
#left {ความกว้าง: 180px; ขวา: 240px; ขอบซ้าย: -100%;}
#right {width: 130px;margin-right: -100%;}
สองแถวและสามคอลัมน์
xhtml: ต่อไปนี้เป็นส่วนที่ยกมา: <div id="header">นี่คือแถวบนสุด</div> <div id="warp"> <div id="column"> <div id="column1"> นี่คือแถวแรก หนึ่งคอลัมน์</div> <div id="column2">นี่คือคอลัมน์ที่สอง</div> <div class="clear"></div> </P> <P></div > <div id= "column3">นี่คือคอลัมน์ที่สาม</div> <div class="clear"></div> </div>
CSS:
นี่คือคำพูด:
#ส่วนหัว{ความกว้าง:100%; ความสูง:อัตโนมัติ;}
#wrap{ ความกว้าง:100%; ความสูง:อัตโนมัติ;}
#column { ลอย: ซ้าย; ความกว้าง: 60%;}
# คอลัมน์ 1 { ลอย: ซ้าย; ความกว้าง: 30%;}
# คอลัมน์ 2 { ลอย: ขวา; ความกว้าง: 30%;}
# คอลัมน์ 3 { ลอย: ขวา; ความกว้าง: 40%;}
.clear{ clear:both;}
สามแถวและสามคอลัมน์
xhtml:
ต่อไปนี้เป็นตัวอย่างเครื่องหมายคำพูด: <div id="header">นี่คือแถวบนสุด</div> <div id="warp"> <div id="column"> <div id="column1">นี่คือ คอลัมน์แรก </div> <div id="column2">นี่คือคอลัมน์ที่สอง</div> <div class="clear"></div> </div> <div id="column3">นี่คือ คอลัมน์ที่สาม </div> <div class="clear"></div> </div> <div id="footer">นี่คือแถวล่างสุด</div>
CSS:
นี่คือคำพูด:
#ส่วนหัว{ความกว้าง:100%; ความสูง:อัตโนมัติ;}
#wrap{ ความกว้าง:100%; ความสูง:อัตโนมัติ;}
#column { ลอย: ซ้าย; ความกว้าง: 60%;}
# คอลัมน์ 1 { ลอย: ซ้าย; ความกว้าง: 30%;}
# คอลัมน์ 2 { ลอย: ขวา; ความกว้าง: 30%;}
# คอลัมน์ 3 { ลอย: ขวา; ความกว้าง: 40%;}
.clear{ ชัดเจน:ทั้งสอง;}
#ส่วนท้าย{ความกว้าง:100%; ความสูง:อัตโนมัติ;}