Position:absolute ใน outter div แต่ width มันล้นออกมาทำอย่างไร

ใครเคยเขียน css โดยใช้ position:absolute คงเคยเจอปัญหามาบ้างนะครับ ตัวอย่างนี้คือ

.outter //สินค้า
{
  width: 50%;
  height: 200px;
}
.inner
{
  width: 100%;
  position: absolute;
  height: 100%;
  background-color: red;
}

มันจะออกมาประมาณนี้ครับ
ซึ่งดูแล้วขอบสีแดงมันล้นกรอบ (outter ออกมา) เยอะจนสุดจอเลยครับ

ซึ่งวิธีแก้ปัญหา ในกรณีนี้ก็คือ ต้องใส่ postion:relative เข้าไปในกรอบนอกคือ outter ด้วยครับ เปลี่ยนโค๊ดใหม่ก็จะเป็น

.outter //สินค้า
{
  width: 50%;
  height: 200px;
  postion:relative;
}
.inner
{
  width: 100%;
  position: absolute;
  height: 100%;
  background-color: red;
}

จะออกมาได้แบบนี้ครับ ใครเคยเจอปัญหานี้ ทำตามนี้ได้เลยครับ ผ่านชัวร์ 100% ครับผม

credit : ภาพประกอบจากเว็บ http://www.jumnotebook.com

แก้ปัญหา substr() พอใช้แล้วท้ายข้อความเป็นสี่เหลี่ยม

มักจะเป็นปัญหากับการใช้เว็บที่เซ็ต Charset แบบ UTF-8ครับ
ถ้าเป็นภาษาไทยพวก tis-620 ฯลฯ จะไม่เกิดเหตุการ์ณประหลาดนี้ครับ

ปกติเราจะใช้

echo substr($msg,0,124);

ผลที่ออกมามันจะเป็นแบบนี้ครับ


วิธีแก้ปัญหามีสองวิธี
แทนด้วย
    echo mb_substr($msg,0,124,'UTF-8'); 
หรือ
    echo iconv_substr($msg, 0,124, "UTF-8");


แค่นี้ล่ะครับ credit : http://www.mindphp.com/forums/viewtopic.php?f=24&t=4547 ไว้ ณ ที่นี้เด้อ