พอดีผ่านมาอ่านเจอกระทู้นี้
ผมเองก็สนใจ CSS template เหมือนกันครับ ก็เลยลอง dowload โค้ดดังกล่าวมาลองรันดูที่เครื่อง

ปรากฏว่า ie6 แสดงผลไม่เหมือน chrome กับ firefoxจริงๆ
ผมเลยลองไปดูไฟล์ style.css ก็เลยแก้บางบรรทัดนิดหน่อย เพราะคิดว่าที่ content มันล้นใน ie อาจเกิดจากความกว้างของ content เกินกว่าที่ควรจะเป็น ผมเลยลองลดขนาด maincontent ใน style.css ดูเหลือ 720 plxs ก็ปรากฏว่าแสดงผลใกล้เคียงกันแล้วครับ

จริงๆ แล้วก็ไม่ได้มีความรู้เรื่องนี้เท่าไหร่ เพียงแต่มาเล่าอันที่ผมปรับแล้วได้ผลยังไงให้น่ะครับ
ขออภัยที่รู้สึกจะไม่ได้ช่วยอะไรเลย แหะๆ
ปกติผมเข้าไปอ่านความรู้เกี่ยวกับ css ที่เวบนี้น่ะครับ http://www.divland.com/

คงต้องรอผู้รู้ css ทั้งหลายมาช่วยตอบอีกที

ข้อผิดพลาดของ CSS ที่เกิดขึ้น เกิดจากการที่กำหนด float ให้กับ เมนูด้านซ้าย แต่ไม่ได้กำหนด float ให้กับส่วน content ด้านขวาครับ เนื่องจากปกติแล้ว div มักจะถูกกำหนดให้ขึ้นบรรทัดใหม่อยู่แล้ว มันจึงไม่ได้ยู่ในตำแหน่งที่้ต้องการถึงแม้ว่าจะไดกำหนดตำแหน่งอย่างถูกต้อง การกำหนด CSS ให้ง่ายและแม่นยำ สามารถทำได้โดยการกำหนด ขนาดและตำแหน่งที่ชัดเจนให้กับแต่ละ element ลงไปเลยครับ ซึ่งจะทำให้การแสดงผลได้เหมือนหรือใกล้เคียงกันในทุก Browser

การแก้ไข ก็ใส่ float:right; ให้กับ maincontent

มีจุดสังเกตุอีกอย่งหนึ่งคือ เมื่อกำหนดตำแหน่งให้กับ maincontent แล้ว เราอาจได้ตำแหน่งของ footer ที่ผิดไป การแก้ไขให้ใส่ clear:both; ให้กับ footer ด้วยครับ เพื่อไม่ให้มีอะไรอยู่ด้านซ้ายหรือขวาของมัน

จริงๆแล้ว ลีักษณะ layout ที่กล่าวมาก็ไม่ใช่จะถูกไปซะทั้งหมด การจัด layout เพื่อให้ง่ายต่อการออกแบบควรจัด layout เป็นชั้นๆไป เพื่อใให้ง่ายต่อการควบคุมครับ (เหมือนตาราง)

<div class="container">
    <div class="header"></div>
    <div class="warper">
        <div class="left-content"></div>
        <div class="right-content"></div>
    </div>
    <div class="footer"></div>
</div>

ส่วนการทำให้ layout มันซ้อนกัน สามารถทำได้โดยกำหนด position เป็น absolute ครับ วิธีนี้จะทำให้ element ไม่อยู่ภายใน element ใดๆ แต่ก็เหมาะกับการกำหนดขนาดให้คงที่เท่านั้น เนื่อง element ที่อยู่ถัดไปจะไม่นำเอาขนาดของ element นี้มาคำนวณตำแหน่งด้วย

ขอบคุณสำหรับความรู้ใหม่ครับ