สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค css

ต่อไปนี้เป็นเทคนิคการใช้ css หลายตัว มากำหนดให้ ความสูงของคอลัมน์ ใน layout สูงเท่ากัน โดยอาศัยความสูง
ของ div ที่มีความสูงมากที่สุดมาปรับใช้งาน

ตัวอย่าง HTML Code
 

<div class="container">
  <div class="rightback">
    <div class="contentback">
      <div class="leftback">
        <div class="leftsidebar">
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
        </div>
        <div class="content">
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
         </div>
        <div class="rightsidebar">        
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
	</div>
      </div>
    </div>
  </div>
</div>

ตัวอย่าง CSS Code

<style type="text/css">
body{
	padding:0;
	margin:0;
	font-family:tahoma;
	font-size:12px;
}

.container{ /* กำหนดส่วนของ เนื้อหา ทั้งหมด */
	width: 900px; /* กำหนดความกว้าง ของทั้ง 3 คอลัมน์รวมกัน */
	margin:auto;
}
.rightback{ /* กำหนดพื้นหลัง คอลัมน์ ด้านขวา */
	background-color: #CCFFCC;
	overflow:hidden;
}
.contentback{  /* กำหนดพื้นหลัง คอลัมน์ ตรงกลาง */
	background-color:#CCCCFF;
	right: 250px;    /* กำหนดความกว้าง ของคอลัมน์ ด้านขวา */
}
.leftback{  /* กำหนดพื้นหลัง คอลัมน์ ด้านซ้าย */
	background-color: #FFFFCC;
	right: 400px; /* กำหนดความกว้าง ของคอลัมน์ เนื้อหา หรือ ตรงกลาง */	
}
.rightback,.contentback,.leftback{ /* กำหนดคุณสมบัติที่ใช้ร่วมกัน */
	float:left;
	position:relative;
	width:100%;
}
.leftsidebar{ /* กำหนดสำหรับคอลัมน์ ด้านซ้าย */
	width: 250px;   /* กำหนดความกว้าง ของคอลัมน์ ด้านซ่าย */
}
.content{  /* กำหนดสำหรับคอลัมน์ ตรงกลาง */
	width: 400px; /* กำหนดความกว้าง ของคอลัมน์ เนื้อหา หรือ ตรงกลาง */
}
.rightsidebar{  /* กำหนดสำหรับคอลัมน์ ด้านขวา */
	width: 250px; /* กำหนดความกว้าง ของคอลัมน์ ด้านขวา */
}
.leftsidebar,.content,.rightsidebar{ /* กำหนดคุณสมบัติที่ใช้ร่วมกัน */
	float:left;
	overflow:hidden;
	position:relative;
	left: 650px; /* ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย ในที่นี้ 900-250  */	
}
</style>

การนำไปใช้งาน
ให้นำค่าที่ต้องการไปกำหนดใน css ด้านบน ตรงส่วนที่ คอมเม้นไว้ ซึ่งมีค่าต่อไปนี้
1.ความกว้างทั้งหมด
2.ความกว้างคอลัมน์ด้านซ้าย
3.ความกว้างคอลัมน์ตรงกลาง
4.ความกว่้างคอลัมน์ด้านขวา
5.ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย

สมมติ ดังนี้
ต้องการสร้าง layout 3 คอลัมน์ กว้างทั้งหมด 900 px คอลัมน์ซ้าย กว้าง 200 คอลัมน์ขวากว้าง 200
ตรงกลางกว้าง 500 สามารถกำหนดได้ดังนี้
1.ความกว้างทั้งหมด=900px
2.ความกว้างคอลัมน์ด้านซ้าย=200px
3.ความกว้างคอลัมน์ตรงกลาง=500px
4.ความกว่้างคอลัมน์ด้านขวา=200px
5.ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย=700px

นำค่าที่ได้ไปแทนใน css ด้านบน

ต้วอย่าง

สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน