การแก้ปัญหากรณี div หลักไม่ขยายตามความสูงของ div ย่อย ใน Firefox

CSS Code

<style type="text/css">
div.cDiv{
	margin:auto;
	width:75%;
	background-color:#EAEAEA;
	border:1px solid #999999;
}
div.lDiv{
	float:left;
	width:200px;
	background-color:#FFCC99;
	border:1px solid #999999;	
}
</style>

HTML Code

<div class="cDiv">
test test
test test

<div class="lDiv">
test<br />

test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />

</div>

</div>

ปัญหาจะเกิดกับ Firefox การแก้ปัญหา โดยเพิ่ม

<div style="clear:both"></div>
ไว้ก่อนปิด div หลัก

HTML Code

<div class="cDiv">
test test
test test

<div class="lDiv">
test<br />

test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />

</div>
<!--เพิ่มบรรทัดข้างล่างนี้ก่อนปิด div หลัก-->
<div style="clear:both"></div>
</div>

บทความในหมวดที่่น่าสนใจ อื่นๆ CSS Learning

25 Sep 08 การทำให้หน้าเว็บของเราสามารถดูได้อย่างเดียว อ่าน 866 31 Oct 09 ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย อ่าน 755 14 Feb 09 การระบุการใช้งาน css ค่าใดค่าหนึ่ง อย่างเฉพาะเจาะจง (specificity) อ่าน 660 14 Jan 10 รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบาย อ่าน 527
จำนวนผู้เยี่ยมชม 86888 คน 2010 © Copyright ninenik.com. All rights reserved.