Multi-Column Layout Design

ผมเชื่อว่าหลายคนคงเคยมีปัญหากับการที่ต้องออกแบบ CSS สำหรับ Layout ที่ถูก design มาหลาย ๆ column แล้ว column เหล่านั้นต้องมีความสัมพันธ์กันเมื่อ content ของฝั่งใดฝั่งหนึ่งนั้นยืดออกในแนวตั้ง อีกข้างก็ต้องยืดตามเท่ากันแม้ว่าจำนวน content ที่อยู่ด้านในนั้นจะไม่เท่ากันก็ตาม ถ้าเป็นเมื่อก่อนผมจะใช้วิธีทำ background picture มาหลอกเอาที่ block element หลัก หรือ ไม่ก็เขียน CSS hack ต่าง ๆ เท่าที่จะหาได้ หรือ เคย bookmark เก็บ ๆ เอาไว้ ถ้าจนปัญญาจริง ๆ ก็คงต้องพึ่งเจ้า czarft แห่ง thaiNUI.com เพื่อนสนิทคนนี้ ให้ช่วยเรื่อง Javascript แต่เมื่อเดือนที่แล้วผมได้ถูกเปิดหูเปิดตาด้วยการคิดนอกกรอบอย่างสร้างสรรค์ (จริง ๆ นะ ไม่เหมือนใครบางคน) ของ Alan Pearce ทำให้ผมได้เห็นว่าบางทีเราก็ควรจะมองจากมุมข้างนอกบ้างก็ดี อย่างน้อยชีวิตก็ไม่ได้อยู่ในกรอบแล้วกรอบอีก ไปซะหมด (ต้องปีนให้หลุดกรอบ แม้นมันจะมีหลาย ๆ กรอบ ก็ต้องพยายามข้ามออกไปบ้าง)

Pearce กล่าวว่าเขาได้พยายามใช้ idea จากที่ designer หลาย ๆ คนที่เขียนเกี่ยวกับเรื่องนี้ไว้แล้วตาม blog ต่าง ๆ แต่ก็ยังไม่ได้สิ่งที่เขานั้นต้องการอย่างแท้จริงเพราะบางวิธีนั้นก็เป็นวิธีที่ใช้กับ multi-column design แบบธรรมดา ๆ หรือ เป็น elastic อย่างที่เขาต้องก็จริงแต่ว่ามันยังคงมี bug ในหลาย ๆ browser เขาจึงเริ่มมานั่งทบทวนด้วยตัวเองแล้วลองมองต่างมุมจากหลาย ๆ บทความที่เขาได้อ่านผ่านมาดู สิ่งที่เขาคิดได้คือ การใช้ border ให้เป็นประโยชน์… อย่างไรล่ะ? มาลองคิดตาม concept ที่เขาคิดขึ้นมาในหัวดู concept มันมีอยู่ว่า

“ถ้าเราสามารถนำ div ทีเราต้องการทำเป็น sidebar หรือ rail เนี่ยมา float อยู่ border ของ div ที่ใช้ใส่ content หลัก ๆ ได้แล้วล่ะก็ เราก็จะสามารถจำลองความสูงเสมือนให้กับ column ที่ต้องการได้ไม่ว่า content ใน column ใดจะสูงกว่าก็ตาม”

วิธีคิดแบบนี้เคยถูกนำเสนอมาแล้วโดย Douglas Livingstone และ Holly และ John Bergeven จาก position is everything จากการอาศัยทฤษฎีเดียวกันนี้ แนวคิดที่ Pearce นำมาเสนอในที่นี้ได้พัฒนามาจาก One-True-Layout โดยทำให้เป็นรูปแบบ elastic two-column มาดูกันว่ามันทำงานอย่างไร ให้สังเกตุจากบรรทัดที่ผม comment ไว้นะครับ

HTML Code:

<div id="container">
  <div id="content">ตัวอย่าง<br />content หลัก</div>
  <div id="rail">ตัวอย่าง ข้อมูลที่อยู่ใน rail หรือ sidebar</div>
</div>

CSS Code:

#container{
  background-color:#0ff;
  overflow:hidden;
  width:750px;
}

#content{
  background-color:#0ff;
  width:600px;
  border-right:150px solid #f00;
  /* ความกว้างของ boder เท่ากับขนาดของ rail หรือ sidebar (สีเดียวกันกับ background color ด้วย) */
  margin-right:-150px; /* Hat tip to Ryan Brill */
  float:left;
}
#rail{
  background-color:#f00;
  width:150px;
  float:left;
}

ให้ลองนำ code ไปทดลองทำดูครับว่าได้ผลตรงตามแนวคิดของ Pearce หรือไม่ ทีนี้ลองมาดูตัวอย่างการทำ three-column layouts ดูบ้างว่าจะได้ผลออกมาอย่างไร

Three-Column
ในส่วนนี้จะแตกต่างจากการทำแบบ Two-column ตรงที่เราจะใส่ border ให้กับ div ที่เป็น container โดยตรงพิจารณาจาก code

HTML Code:

<div id="container">
  <div id="center">ข้อมูลของ<br />column ที่อยู่ตรงกลาง</div>

  <div id="leftRail">rail ด้านซ้าย</div>
  <div id="rightRail">rail ด้านขวา</div>
</div>

CSS Code:

#container{
  background-color:#0ff;
  float:left;
  width:500px;
  border-left:150px solid #0f0;
  /* ขนาดความกว้าง และ สี เหมือนกับ leftRail */
  border-right:200px solid #f00; 

  /* ขนาดความกว้าง และ สี เหมือนกับ rightRail*/
}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;

}
#center{
  float:left;
  width:500px;
  margin-right:-500px;
}
#rightRail{

  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
}

จาก code จะเห็นว่า center column มี right margin -500px ซึ่งจะเอื้อให้เจ้า leftRail เนี่ย float อยู่บนระยะ margin นี้ Pearce บอกว่ามีหลายวิธีที่จะทำให้การแสดงผลออกมาในลักษณะนี้แต่วิธีนี้น่าจะเป็นวิธีที่ดีที่สุดที่จะสามารถสนับสนุนแนวคิดของเขา เมื่อเรานำไปประยุกต์ใช้กับ layout แบบ liquid

เมื่อเราต้องการที่จะประยุกต์ใช้แนวคิดนี้กับ liquid layout เราจะต้องใส่ overflow: hidden เพิ่มเข้าไปให้กับ container เพราะเมื่อ container นั้นสามารถยืดหยุ่นได้เจ้า rail เนี่ยมันจะ float ออกไปนอก container เพราะฉะนั้นเราจะต้องใส่ overflow: hidden กำกับเข้าไปไว้ด้วย เพราะอะไร? เพราะว่า modern browser ที่ไม่ใช่ตระกูล IE นั้นจะแสดงผลส่วนที่ overflow ออกไปให้เราเห็นด้วย ดังนั้นด้วยเหตุนี้เราจึงจำเป็นต้องใส่ overflow: hidden ให้กับเจ้า container มาลองดูตัวอย่าง code ของ liquid layout Two-Column กันครับขออนุญาติใช้ HTML Code เดิมจากด้านบนนะครับ เปลี่ยนเฉพาะ CSS Code ดังนี้ครับ

CSS code:

#container{
  background-color:#0ff;
  overflow:hidden;
  margin:0 100px;
  padding-right:150px;
/* ความกว้างของ boder เท่ากับขนาดของ rail หรือ sidebar (สีเดียวกันกับ background color ด้วย) */

}
* html #container{
  height:1%; /* ใช้ร่วมกับ browser ตระกูล IE */
}
#content{
  background-color:#0ff;
  width:100%;

  border-right:150px solid #f00;
  margin-right:-150px;
  float:left;
}
#rail{
  background-color:#f00;
  width:150px;

  float:left;
  margin-right:-150px;
}

จะเห็นได้ว่า CSS ไม่ต่างกันมากจะมีเปลี่ยนไปเพียงบางส่วนตามที่อธิบายข้างต้นไว้แล้ว คือ เพิ่ม overflow: hidden สำหรับ modern browser ต่าง ๆ และความกว้างของเจ้า container จากที่ fix ไว้ก็กลายเป็น 100% อีกที่หนึ่งคือ *html#container {height: 1%;} ใช้ร่วมกับ IE ซึ่ง IE จะตีความหมายเหมือนกับ overflow: hidden (คุณสามารถเขียนไว้ใน style sheet file หรือแยกไว้ที่หน้านั้น ๆ ด้วย condition comment ก็ได้ แล้วแต่สะดวกครับ)

Pearce ยังคงค่า margin ไว้เพื่อทำให้เกิดช่องว่าง สิ่งนี้จำเป็นมาก padding-right จะบีบให้ความกว้างของcontent นั้นแคบลง เพราะตอนนี้เราเปลี่ยนให้มันมีความกว้างเป็น 100% แล้ว ถ้าไม่มีการกำหนด padding แล้วเจ้า rail ของเราก็จะกระเด็นออกไปอยู่นอกกรอบที่ต้องการให้แสดงผลทันที และก็จะมองไม่เห็นด้วยถึงแม้จะมี overflow: hidden อยู่ก็ตาม ทีนี้เรามาดู liquid layout ที่เป็น Three-Column กันบ้าง เช่นกันครับขอยกตัวอย่างเฉพาะ CSS Code

CSS Code:

body{
  margin:0 100px;
  padding:0 200px 0 150px;
}
#container{
  background-color:#0ff;
  float:left;

  width:100%;   
  border-left:150px solid #0f0;
  border-right:200px solid #f00;
  margin-left:-150px;
  margin-right:-200px;
  display:inline; /* ใช้ร่วมกับ browser ตระกูล IE */

}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
}

#center{
  float:left;
  width:100%;
  margin-right:-100%;
}
#rightRail{
  float:right;

  width:200px;
  margin-right:-200px;
  position:relative;
}

จาก code คุณจะเห็นว่า margin และ padding นั้นไปอยู่ที่ body แทนแล้วในตอนนี้ margin จะเป็นตัวผลักให้ layout นั้นเขยิบเข้ามาจากขอบหน้าจอของ browser และ padding ก็คือความกว้างของเจ้า rail พื้นที่ที่เหลือก็จะเป็นพื้นที่ที่ความกว้างของ container นั้นสามารถยืดมาให้เต็ม 100% (ตามความพยายามของมัน) หักลบจาก margin และ padding ที่เรากำหนด

มาดูที่ container กัน จะเห็นว่า Pearce นั้น ยังคงใส่ border และ margin ไว้เหมือนเดิมอย่างที่เคยทำ เพราะว่าจะทำให้ border ไปแทนที่ padding ของ body พอดี พยายามทำให้ทุกอย่างอยู่ในที่ที่ควรจะอยู่ของมัน แล้วสุดท้ายค่อยมาจัดการกับ div

บทความนี้ คงทำให้หลาย ๆ คน ได้วิธีใหม่ ๆ ในการแก้ปัญหาได้บ้างนะครับ ขอบคุณความคิดนอกกรอบที่ดีดี และ มีประโยชน์ของ Alan Pearce สุดท้ายขอบคุณคุณนั่นแหละครับ ที่อ่านจนจบ

มีความสุขกับการคิดนอกกรอบอย่างสร้างสรรค์ครับ (เลียนแบบเจ้าสำนัก)