คำตอบของคำถามนี้ มีข้อเดียวครับ คือให้ออกแบบเว็บตามข้อกำหนดของ XHTML และ CSS อย่างเคร่งครัด

ผมเองก็ไม่รู้ว่าจะตอบว่าจะต้องทำยังไง มันถึงจะถูกหรอกครับเนื่องจาก การวาง layout ที่ถูกต้องมันมีความสำพันธ์กันทั้งเว็บ ถ้าทำตากฏซะตั้งแต่บรรทัดแรก บรรทัดต่อๆไปก็จะไม่มีปัญหา

การออกแบบเว็บตามหลัก XHTML ก็ไม่ยากหรอกครับ แค่ทำให้เป็นนิสัยก็พอ ถ้าทำได้ คุณอาจจะรู้สีกได้ว่า เอ....แล้วจะทำไงให้มันเพี้ยนหว่า

ผมเองก็ผ่านช่วงที่ไม่เข้าใจมันมาแล้ว เมื่อทำบ่อยๆเข้า คุณจะรู้ว่า กฏของมันที่ต้องระวัง มีไม่กี่ตัว และ มีอะไรบ้าง ที่ต้องมี หรือ ห้ามมีบ้าง ในหน้าเว็บ

ของแบบนี้ต้องหัดให้มันเคยครับ และให้มันผ่าน W3C ทุกบรรทัด มันถึงจะ work ครับ

555

ห่างไม้ห่างมือมากไปหน่อย งง
เฮ่อะๆ

ช่วงนี้เค้าเห่อใข้หวัดกับหมีแพนด้ากันจังนะฮ่ะคุณอา
ไม่เห่อช้างเห่อ buffalo ของไทยมั่งเลย คงน้อยใจแย่

ผมทนรับสภาพกับ IE ไม่ได้จนต้องใช้ CSS Hack เลยครับ 55

ตอนนี้กำลังพยายามเขียนให้ได้ ดังที่ อาจารย์บอกอยู่ เหมือนกันครับ

แต่ตอนนี้ใช้ CSS Hack แก้ไปพลางๆก่อน เดี๋ยงานผมไม่เดิน

สำหรับ Footer ที่เป็นปัญหาผมแนะนำให้ ใช้ Clear:Both; ที่ footer เพิ่มลงไปครับ

ไม่แนะนำให้ footer ไปอยุ่ใน content ครับ ถ้าเป็นผมจะแยกมันออกมา

ผมจะไม่เอาไปซ้อนกันครับ เพื่อลดปัญหาการเหลื่อมกัน ที่ผมทำประมาณนี้ครับ

เท่าที่ลองแงะดู มันจะวางในตำแหน่งใดก็แล้วแต่
IE มันจะอ้างอิง px ถัดจากจากอ็อปเจ็คท์ตัวก่อนหน้า
(สมุติว่าอ็อปเจ็คท์นั้นอยู่ในแท็ก DIV)
แต่ตัวอื่นมันไม่สนใจอ็อปเจ็คท์ที่อยู่ก่อนใดๆ ทั้งนั้น
มันวัดเอาที่ขอบของเบราเซอร์เลย
จึงอิสระในการจัดวางมากกว่า

ถ้าทฤษฎีนี้ผิดก็ขออภัยด้วย
หากทฤษฎีนี้ถูกต้องก็ปรบมือให้ทีครับ

555+++

ผิดครับ

อ้างอิงจาก ความคิดเห็น #4IE มันจะอ้างอิง px ถัดจากจากอ็อปเจ็คท์ตัวก่อนหน้า
(สมุติว่าอ็อปเจ็คท์นั้นอยู่ในแท็ก DIV)
แต่ตัวอื่นมันไม่สนใจอ็อปเจ็คท์ที่อยู่ก่อนใดๆ ทั้งนั้น
มันวัดเอาที่ขอบของเบราเซอร์เลย

การกำหนดว่าตำแหน่งเริ่มต้นจะอ้างอิงจากจุดใดขึ้นกับการกำหนด property position ครับ

จริงๆแล้ว เหตุผลที่ Browser แต่ละตัว แสดงผลไม่เหมือนกัน ก็เนื่องมาจาก

1. เทคนิคการ render หน้าเว็บต่างกัน
2. ค่าเริ่มต้นของ element ต่างๆ ต่างกัน

ทั้ง 2 ข้อนี่คือเหตุผลหลักๆ ที่ทำให้การแสดงผลต่างกัน

ปัญหาข้อที่ 1 เทคนิคการ render ที่ต่างกัน ผมยกตัวอย่างตรงๆนะครับ  บน IE (ฺBrowser ที่ไม่ยอมเข้าสู่มาตรฐาน) tag ผิดไปซักตัว หรือใส่ tag ผิดรูปแบบ มันก็ยังแสดงผลได้ถูกต้อง ในขณะที่ Browser ที่ใช้การ render ที่เป็นมาตรฐาน อาจจะไม่สามารถแสดงผลหน้านั้นได้เอาดื้อๆ หรือไม่ก็แสดงผลผิดพลาดอย่างมาก

การแก้ไขสำหรับกรณีที่ 1 ก็คือ ทำให้เว็บไซต์มีโค้ดที่เข้าสู่มาตรฐานไว้ก่อน (รอ IE เข้าสู่มาตรฐาน) ออกแบบตามหลัก XHTML ให้ถูกต้อง ถึงผิด ก็ไม่ผิดมากหรอกครับ

ปัญหาข้อที่ 2 ค่าเริ่มต้นของ element ต่างกัน ยกตัวอย่างเช่น tag <p> ระหว่าง IE และ Browser มาตรฐาน มีค่า margin ไม่เท่ากัน เป็นต้น

การแก้ไขสำหรับกรณีที่ 2 ก็ไม่ยากครับ ถ้าเรารู้ว่าอะไรที่  Browser ต่างๆ มีไม่เหมือนกัน ก็ทำให้มันมีเหมือนๆกันซะด้วย CSS เช่น

p {
  margin: 10px 0;
}

เพียงเท่านี้ Browser ทุกตัวก็มีค่าเริ่มต้นของ element p เท่ากันแล้ว

ถูกก็ดีใจ
ผิดจะแก้ใข

พยามศึกษาจากโค้ด รู้ผลลัพภ์ก็ต้องทำความเข้าใจ
ไม่ว่าจะงูๆ ปลาๆ แค่ไหน
ถ้ารู้จักหาข้อมูลเอง รู้จักถามคนอื่น ก็จะรู้และจะเข้าใจ

จากด้านบนด้วยความไม่รู้ จึงได้พยามหาเหตุผล
และได้สรุปเอาตามที่ตัวเองเข้าใจว่า...คิดว่า...น่าจะ....

เมื่ออยากรู้ว่าที่เปรียวเข้าใจนั้นมันใช่จริงๆ อย่างที่เข้าใจ
หรือเปล่าก็ต้องมาถาม
กับผู้รู้ดูอีกทีเพื่อปรับความเข้าใจให้ถูกต้องอย่างแท้จริง
และ อ๋อ มันเป็นอย่างนี้นี่เอง

ตอนนี้ก็เข้าใจ CSS มากขึ้นกว่าเดิมอีกส่วนนึงแล้ว
ขอขอบพระคุณ
คุณอา gOragod 
ที่ให้ความกรุณาชี้แนะอย่างกระจ่างเป็นอย่างสูงฮ่ะ

ตกลง ผู้ชาย หรือ ผู้หญิงอ่ะ
ต้องมีเพศที่ 3 บนเว็บมั้ย

มีคู่ขา CSS อีกคนแล้ว อิ อิ นึกว่าไม่มีใครสนใจ CSS แล้วซะอีก

อ้างอิงจาก ความคิดเห็น #7ตกลง ผู้ชาย หรือ ผู้หญิงอ่ะ
ต้องมีเพศที่ 3 บนเว็บมั้ย

555+

ยังไง .::{เปรียว}::. ก็ไม่ใช่เพศที่ 3 แน่นอนฮ่ะ
ที่เหลือก็เก็บไว้ให้เดาเอาเอง

(เข้ามาตอกย้ำความขายหน้าของตัวเอง)
(เผื่อใครที่ยังไม่รู้จะได้เข้ามาอ่านดู ขำๆ)