จัดตำแหน่งด้วย float and clear

การวางตำแหน่ง layout ของ div แต่ละอัน เรามักจะใช้ property float และ clear เป็นประจำ ทำให้เราวางตำแหน่งได้อิสระมากขึ้น ในกรณี ที่ต้องการให้มีหลาย คอลัมภ์ ใน 1 หน้า
float นั้นจะคล้าย align ที่เราใส่ใน table เมื่อต้องการให้มันอยู่ชิดด้านซ้าย ก็ใส่ float:left ถ้าชิดขวาใส่ float:right

ส่วน clear นั้น clear:left คือ ไม่ยอมให้มีอะไรอยู่ด้านซ้าย , clear:right คือ ไม่ยอมให้มีอะไรอยู่ด้านขวา,ที่มักใช้เป็นประจำคือ clear:both คือ ไม่ยอมให้มีอะไรอยู่ทั้ง 2 ด้าน มักจะใช้กับส่วน footer

จากโค้ด css

<style type=”text/css”>
#col-one{width:300px; height:200px; background:#666666}
.no1{width:100px; height:100px; background:#FFCC00;}
.no2{width:100px; height:100px; background:#99CC00;}
</style>

และ html ดังนี้

<div id=”col-one”>
       <div class=”no1″>no1</div>
        <div class=”no2″>no2</div>
</div>

จะได้ กล่องเรียงกันลงมา แบบนี้

เราจะเพิ่ม float:left; เข้าไปที่ .no1 และ .no2 จะได้เป็น

.no1{width:100px; height:100px; background:#FFCC00; float:left}
.no2{width:100px; height:100px; background:#99CC00; float:left;}

ทำให้ div no1 นั้นชิดซ้าย และ no2 ก็ตามขึ้นมาด้วย

no1- left, no2 – right

.no1{width:100px; height:100px; background:#FFCC00; float:left}
.no2{width:100px; height:100px; background:#99CC00; float:right;}

จะได้

สมมติว่า เรายังไม่รู้ว่าเนื้อหา ใน col-one นั้นจะมีเท่าไร ถ้ามีมาก ส่วนพื้นหลังสีดำ ก็ควรจะยืดลงมามาก ถ้ามีน้อยก็ควรจะหดสั้นลงให้พอดีกับเนื้อหา ตอนนี้เรากำหนดไว้ที่ height:200px; เราจะลบ property นี้ออก จะเป็น

#col-one{width:300px;background:#666666}

จะได้ผลดังนี้

จะเห็นว่า Fx จะไม่ทำแบ็คกราวน์ยืดลงมาตามสิ่งที่มีอยู่ข้างใน แต่ IE6 ทำ ส่วน opera netscape ทำเหมือน Fx
วิธีทำ cross browser สำหรับกรณีแบบนี้ คือ ใช้ class clear-all

.clear-all{clear:both; line-height:0; height:0;}

คลาสนี้ ควรจะเป็นคลาสที่มีอยู่ในไฟล์ .css ทุกครั้งที่มีการใช้ float จะต้องมีการ clear เสมอ เราจะใส่ class นี้ ใน tag <br> หรือ div จะได้เป็น html ดังนี้

<div id=”col-one”>
        <div class=”no1″>no1</div>
        <div class=”no2″>no2</div>
        <br class=”clear-all”>
</div>

ถ้าใส่ในรูป div จะได้

<div id=”col-one”>
        <div class=”no1″>no1</div>
        <div class=”no2″>no2</div>
        <div class=”clear-all”></div>
</div>

ก็จะทำให้ ส่วนพื้นหลังสีดำยืดลงมา เหมือนในรูปของ IE6 ถ้าเมื่อไรที่มีวัตถุลอยขึ้นไป ไม่ตรงตำแหน่งที่วางไว้ หรือส่วนแบ็คกราวน์ ไม่ยอมยืดลงมา ก็ให้สังเกตที่ตัว float และ clear อาจมีการ float ไม่ถูกต้อง หรือ อาจมีการ clear ไม่ถูกที่ อย่างใดอย่างหนึ่ง

ภาพตัวอย่างการ layout ด้วย float และ clear

ตำแหน่งของ html จะเรียงจากบนลงล่างซ้ายไปขวา ดังนี้

<div id=”header”></div>
<div id=”green”></div>
<div id=”yellow”>
        <div id=”pink”></div>
        <div id=”sky”></div>
        <br class=”clear-all”>
        <div id=”grey”></div>
</div>
<div id=”footer”></div>

ส่วนของ css ที่กำหนดความกว้างสูง และ สี ลองไปเติมกันดูครับ

Related Articles

• เรียนรู้การใช้ ul li step by step (28)
• เขียน css อย่างสั้น ง่ายๆ โหลดไวๆ (15)
• มารู้จักกับ xhtml กันก่อน (4)
• พื้นฐาน กับ CSS Box Model (15)
• ทำกล่องขอบโค้งด้วย css (14)