Sidebar1 Content

The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content.

 

Sidebar2 Content

The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content.

 

การจัด Layout

ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page Body), และส่วนท้าย (Page Footer) จัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้ ทำได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์ และ 3 คอลัมน์ 

ในการลงมือเขียนเว็บเพจ ปัจจุบันนิยมใช้ Div ในการจัด Layout มี 3 รูปแบบดังนี้

1. Fixed Layout 

จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม 

 

2. Liquid Layout

จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์ เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์ ขนาดของส่วนต่างๆ จะย่อขยายตาม

 

3. Elastic Layout

จะกำหนดขนาดของส่วนต่าง ๆ เป็น em ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์ เมื่อเพิ่มหรือลดขนาดของตัวอักษรแล้ว ยังสามารถคงรูปแบบการจัดวางส่วนต่างๆ ไว้ได้อย่างดี