วอนผู้รู้เรื่อง CSS หน่อยครับ +1 ได้โปรด

[VadiForte]

พอดีผมกำลังหัดทำ theme wordpress อยู่ครับ แค่ขั้นแรกผมก็ติดแล้วอ่ะ 

ติดอยู่ตรงที่จัด Layout ด้วย div css

ผมงมตั้งแต่เช้า จนถึงตอนนี้ ผมก็ยังไม่สามารถแก้ได้ ว่าทำไมเวลาผมลองใส่ข้อมูลลงไป ช่อง Div ด้านบน มันต้องไปทับ Footer ด้านล่าง ทำให้ Footer ย้ายไปอยู่ด้านข้างกับ Sidebar

จนปัญญาจริงๆครับ ใครรู้รบกวนหน่อยนะครับ 

[VadiForte]

ลืมใส่ Code ให้ครับ 

โค้ด เลือก ขยาย

#container{
    width:960px;
    margin: auto;
background-color:#CCC;
}

#header{
width:960px;
background-color:#CFC;
text-align:center;
}

#content {
width:690px;
background-color:#C00;
float:left;
text-align:center;
}

#sidebar {
width:270px;
background-color:#060;
float:right;
text-align:center;
}

#footer{
width:960px;
background-color:#06F;
text-align:center;
}

#main {
  width:960px;
}

โค้ด เลือก ขยาย

<div id="container">
<div id="header">
    H E A D E R<br />
    H E A D E R<br />
    </div>
   
    <div id="main">
            <div id="content">
            <p>1</p><br />
            <p>1</p><br />
            <p>1</p><br />
            <p>1</p><br />
            </div>
            <div id="sidebar">
            S I D E B A R<br />
            S I D E B A R<br />
            </div>
    </div>
  <div id="footer">
    F O O T E R<br />
    F O O T E R<br />
    </div>
</div>

[goldxp]

#footer{
        clear:both;
   width:960px;
   background-color:#06F;
   text-align:center;
}

ถ้าตัวก่อนหน้า float ตัวถัดไปจะได้รับผลกระทบให้ clear float ครับ

[metha_design]

css footer ให้ใส่ clear:both; ครับ มันจะตกลงด้านล่างตลอดเองครับ

[dtscript]

ขอเวลา 2 5 นาที ^^

[dtscript]

-.- ตามด้านบนเลยเน่อ 

[VadiForte]

อ๋อออ ขอบคุณทุกท่านจริงๆครับ 
+1 All

[Pink.in.th]

หว้าาาา  ไม่ทันเลยเรา 

[pollpolball]

โค้ด เลือก ขยาย

display:inline-table;

ตารางจะได้ไม่ทับกัน

[awayhost]

ตามด้านบนเลยครับ เวลาจบ </div> อย่าลืมใส่ class clear ด้วย

[testsoft]

แจ่มๆๆ 

[MD.18]

ผมว่า ศึกษาการจัดวางในรูปแบบ เป็น % เลยก็น่าจะดีนะครับ

และก็พวก min-width | min-hight  และก็พวก การซ้อนกันของเลเยอร์อ่าครับ z-index  หรือพวก div ซ้อน div หลาย ๆชั้นอ่าครับ เพราะมันต้องได้ใช้แน่นอนครับ

และควรใช้ โครงสร้างที่เป็น html5 ได้แล้วครับ  <nav> <article> <aside> <section> <footer>  เพราะกูเกิ้ลได้ปรับการให้ความสำคัญกับโค๊ดรุ่นใหม่ โดยจะให้ความสำคัญไปอยู่ที่แทค <article> มากกว่า
ส่วนตัวประกาศตรงเฮดก็ ปรับให้เป้นรูปปแบบ html5 ด้วยเลย เพราะ gg จะดูในส่วนนี้ก่อนเมื่อมาเก็บดัชนี  เพื่อให้ง่ายในการวิเคราะห์ประมวลผล ( อันนี้คิดเอาเองนะ ว่า gg ใช้เฮดในการจัดประเภท วัตถุที่ต้องเก็บดัชนี )

โดยตัวอย่างก็ดู https://github.com/h5bp/html5-boilerplate

ประมาณนั่นแหละครับ