บทความแรกก็นำมาจากเว็บเก่าแหละครับ เห็นว่ามันก็พอจะมีประโยชน์หลงเหลืออยู่กับเขาบ้างก็เลยนำมาเป็นเรื่องเกี่ยวกับการทำโครงสร้าง CSS

โครงสร้างเลเอาท์ก็ประกอบด้วย Header Content และ Footer โดยในที่นี้จะเป็นโครงสร้างที่ Footer ติดพื้นตลอด ไม่ว่าหน้าต่าง Window จะมีขนาดเท่าไหร่

ส่วนแรกเป็นส่วนของไฟล์ css นะครับ สร้างแล้ว include เข้ามาก็ได้ครับ

@charset "utf-8";
/* CSS Document */
html,body {
    margin:0;
    padding:0;
    height:100%; /* ใช้ร่วมกับ wrapper */
    background:gray;    
    font-family:Tahoma;
    font:normal 12px/130% Tahoma,Arial, Helvetica, sans-serif;  
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0;
    padding:10px;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0;
    padding:5px 0 5px 10px;
}

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#warpper {
    position:relative; /* กำหนดเพื่อ footer*/
    margin:0 auto; /* กำหนดให้อยู่ตรงกลาง ไม่สามารถใช้ได้ใน ie5 */
    width:750px;
    background:#f0f0f0;    
    height:auto !important;
    height:100%; /* IE6*/
    min-height:100%; 
}

div#header {
    padding:1em;
    background:#ddd;
    border-bottom:6px double gray;
    height: 50px;
}
    div#header p {
        margin:0;
    }

div#content {
     padding-bottom:20px;  /* กำหนดให้เท่ากับความสูงของ footer */
}
    div#content p {
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    height: 20px;
    bottom:0; /* ให้ติดพื้น */
    background:#F00;
    border-top:6px double gray;
}
    div#footer p {
        text-align:center;
        color:#FFFFFF;
        padding:0;
        margin:0;
    }

ส่วนที่ 2 นี้เป็นส่วนของไฟล์ html เอาไปไว้ใน tag body นะครับ

    
    
        

            
CSS layout: 100% height with header and footer
 
        
        

            
Min-height
            
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In viverra  massa. Aliquam consectetuer tortor ac est. Aenean ac quam. Pellentesque  habitant morbi tristique senectus et netus et malesuada fames ac turpis  egestas. Donec metus mi, pharetra ut, tincidunt pulvinar, scelerisque  id, ipsum. In hac habitasse platea dictumst. Morbi nibh lacus, laoreet  vitae, porta ac, dictum ullamcorper, lacus. Cras lorem justo, varius  sed, placerat ut, dapibus id, risus. Suspendisse non nisl a diam mollis  rhoncus. Duis in justo nec sem volutpat cursus. Pellentesque egestas  aliquam ipsum. Pellentesque vitae dolor sed eros cursus tempor. Class  aptent taciti sociosqu ad litora torquent per conubia nostra, per  inceptos himenaeos. 
            
Maecenas neque tellus, placerat vitae, pharetra vitae, tincidunt id,  velit. Nullam nec lectus sed dui lacinia bibendum. Nunc quis velit.  Quisque aliquam mauris ut turpis. In ut nisi. Sed pharetra. Donec nec  magna. Sed ultrices mi quis dolor. Pellentesque elit sapien, vulputate  id, ornare at, lobortis nec, lacus. Pellentesque fermentum. 
      
        

            
This is footer
        
    

ไม่มีตัวอย่างให้ดูนะครับ มือใหม่หัดใช้ Drupal ทำบ่ะเป็น ฮ่า ๆ

อธิบายคร่าว ๆ นะครับ

• html , body  จะเป็นการกำหนดรูปแบบของเว็บ เช่น Font
• warpper  เป็นการกำหนดโครงสร้างภายในเว็บ และโครงสร้าง CSS จะเป็นไปตามโค๊ด  และภายใน Warpper จะประกอบด้วย  Header, Content และ Footer  ซึ่งจะกำหนด Position  เป็น Relative  เพราะว่า  จำเป็นโครงสร้างแม่ของ Footer อีกด้วย
• Header กับ content  ก็สามารถกำหนดรูปแบบได้ตามต้องการ  ในส่วนของ Content ส่วน padding-button  ให้มีความสูงเท่ากับ Footer ด้วยนะครับ
• Footer  จะใช้ Position เป็น Absolute และกำหนด bottom เป็น 0 เพื่อให้ติดพื้นตลอด