เขียนเว็บเองก็ได้ ง่ายจัง!

Fluid Width with Right Column

เนื้อหา + คอลัมน์ขวา และ กำหนดความกว้างแบบยืดหยุ่น

เช่นเดียวกับ เลย์เอาต​์ที่กำหนดความยืดหยุ่นแบบอื่นๆ การกำหนดให้ส่วนเนื้อหาหลักยืดหรือหด ไปตามความกว้างหน้าจอหรือหน้าต่างของบราวเซอร์ จะรับประกันได้ว่า ผู้ใช้งานทุกคนจะสามารถรับสารที่เว็บไซต์แห่งนั้นต้องการสื่อได้ครบถ้วน เฉพาะในแนวนอนนะครับ ส่วนแนวตั้งนั้นกำหนดความสูงของหน้าเว็บตายตัวนั้นยาก ยกเว้นจะทำเป็นกรอบ scroll bar ซ้อนไว้ แต่การทำแบบนั้น มันดูขาดรสนิยมพิกล

ตัวอย่างเว็บไซต์ที่ใช้เลย์เอาต์แบบนี้ ก็ได้แก่

คุณสามารถเริ่มต้นอ่านวิธีการเขียนหน้าเว็บ โดยใช้ html + css ได้ที่ บทความนี้ ครับ

ตัวอย่างเลย์เอาต์ แบบความกว้างคงที่

  1. Fixed Single Column
  2. Fixed+Left
  3. Fixed+Right
  4. Fixed+Left+Right

ตัวอย่างเลย์เอาต์ แบบความกว้างยืดหยุ่น

  1. Fluid Single Column
  2. Fluid+Left
  3. Fluid+Right
  4. Fluid+Left+Right