เกี่ยวกับ div ครับ

คำถามวันนี้ ผมสงสัยเรื่องของ CSS ในการควบคุม DIV ผมตั้งใจอยากจะรู้มากเลยครับ
ก่อนอ่าน ท่านที่จะช่วยคลี่ปมก็ดี หรือท่านที่สงสัยเหมือนกันก็ดี ดูรูปประกอบด้วยครับ เดี๋ยวงง

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

ถ้าสังเกตุใน <div #yel> จะมีการใส่ค่า left:600px; เพื่อให้บวกจากระยะของบราวเซอร์และระยะของ <div #red>
และ <div #green> จะมีการใส่ค่า left:900px; เพื่อให้ตำแหน่งถูกบวกจากระยะขอบเบราว์เซอร์และ <div #red> และ<div #green>

ผมใช้ Resolution ขนาด 1600×900 px แต่พอผมไปเปิดดูเครื่องอื่น มันแตกเละเทะหมดเลย
ผมจึงสรุปคร่าวๆด้วยตัวเองว่า น่าจะเป็นผลจากการใช้ position:absolute ที่ทำให้ค่า left ของ div ทุกตัวถูกฝังอยู่กับที่
แม่ว่าจะใส่ค่า div ที่ครอบทุกสิ่งให้เป็น width:900px ก็จะไม่ช่วยให้บีบ Div ทั้ง 3 อยู่ในดิฟของมันดังรูป

เห็นป่ะครับ สีเทา คือ <div #ครอบทุกสิ่ง> จริงๆแล้ว มันไม่ได้ควบคุม แดง เขียว เหลือง ที่อยู่ในตัวมันเลย

คำถามเงินล้าน : ทำอย่างไร ให้ DIV ทั้งสามตัว แดง เหลือง เขียว เรียงกัน ให้อยู่กึ่งกลาง เหมือนรูปแรก โดยไม่ต้องใช้คำสั่ง left
เพื่อให้สามารถแสดงผล กับทุก Resolution ได้ ให้มันอยู่ตรงกลางของเพจเลยอ่ะครับ ใครพอช่วยผมได้มั่งเอ่ย!

ขอบคุณครับ สวัสดีครับ

น่าจะมีโค้ดตัวอย่างประกอบ