การเขียน Liquid Layouts 3 Columns
ผมค้างเอาไว้จากบทความก่อนหน้า เกี่ยวกับการเขียน CSS Layout แบบ เต็มหน้า ตอนนี้มาดูกันต่อว่า ถ้าจะทำเป็นแบบ สามคอลัมน์ต้องลดและเพิ่มตรงไหนบ้าง เพื่อที่จะจัดหน้าให้เข้าที่ได้ง่ายที่สุด
สำหรับคนที่ยังไม่ได้อ่านรูปแบบการเขียนเลย์เอ้าท์ แบบต่างๆ สามารถอ่านเพิ่มเติมได้ที่ CSS Layout ในรูปแบบต่างๆ และ CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%) จะได้เข้าใจการเขียน สามคอลัมน์แบบนี้มากยิ่งขึ้น
สิ่งที่เพิ่มเข้ามาในการเขียนแบบ สามคอลัมน์ีนี้ก็คือ ข้อมูลฝั่งขวามือ ซึ่งผมใช้ คลาส .added-content ลักษณะการเขียน ผมเขียนต่อจาก class .sidebar ก่อนที่จะขึ้น content จริง แล้วสั่ง float: right เพื่อที่จะให้กล่องลอยไปอยู่ด้านขวา และกลับไปที่ class .content จากเดิมที่ มี margin ทางฝั่งซ้ายอย่างเดียว กลายมาเป็นการเขียน CSS แบบ short hand อยู่ในการสั่ง shorthand property คือ margin: 0 21%; (เดี๋ยวจะมาเล่าอีก ในโอกาสต่อไปครับ) เมื่อเพิ่ม margin เข้าไปฝั่งขวา ก็จะเกิดช่องว่างเพิ่มอีก 21% เพื่อที่จะเหลือไว้ให้ .added-cotent เข้าไปสิงอยู่ได้พอดี