รบกวนขอคำปรึกษา DIV CSS / Sidebar ด้วย absolute ครับ

[mean]

รบกวนขอคำชี้แนะ เกี่ยวกับการ ทำ sidebar เว็บ ด้วย DIV หน่อยครับ

ปัญหา คือ เมื่อ #sidebar มีเนื้อหา ที่ใช้ความสูงมากขึ้น กรอป #warpper ไม่ยอมขยายส่วนสูงตามครับ

แต่หาก #content มีเนื้อหา ที่สูงขึ้น warpper จะขยายส่วนสูงตาม

ผมวาง div sidebar ไว้ก่อน content เพื่อให้ Browser ประมวลผล HTML ก่อน

พอจะมีท่านใด เคยทำ sidebar ด้วย absolute แล้วดันไปด้านขวา บ้างไหมครับ

---
สาเหตุที่ไม่ใช้ float กำหนด position สืบเนื่องจากการแสดงผล ในแต่ละ Browser ไม่เหมือนกันครับ

ขอบคุณครับ





<div id='wrapper'>
  <div id='sidebar'>
   .....
  </div>
  <div id='content' >
  .....
  </div>
</div>
<div id='footer'>
</div>
</div>

#wrapper {
width:981px;
margin: 0 auto;
height:100%;
}

#sidebar {
    margin-left: 750px;
    position: absolute;
}

#footer {
clear:both;
}

[KenjiroAPI]

ศึกษาแนวทางจากเว็บไซต์นี้ดูนะครับ
http://offshootinc.com/blog/2011/11/23/getting-100-column-height-with-css/

[mean]

ศึกษาแนวทางจากเว็บไซต์นี้ดูนะครับ
http://offshootinc.com/blog/2011/11/23/getting-100-column-height-with-css/

ขอบคุณครับ
ลองดูแล้ว เป็นเหมือนกับที่ผมเป็นเลยครับ พอลองใส่ <br> ที่ sub content ล้นเหมือนกัน

[dekdee]

ลองแบบนี้ได้ไหมครับ

#wrapper {
width:981px;
margin: 0 auto;
height:100%;
}

#sidebar {
    width:xx px;
    position: relative;
    float:left;
}

#footer {
clear:both;
}

[mean]

ขอบคุณครับ คุณ dekdee
หากใช้  sidebar float:left
เราต้องจัด layer

  <div id='content' >
  </div>
  <div id='sidebar'>
  </div>

ถึงจะได้ครับ จริงๆ ผลต่างจาก

  <div id='sidebar'>
  </div>
  <div id='content' >
  </div>

ตรงที่ เวลา browser ประมวลผล จะทำให้ทาง sidebar ไม่เกิดการ refresh แว๊ปๆ ครับ

-----

เมื่อสักครู่ผมไปเจอเว็บนี้มา
http://24ways.org/2008/absolute-columns/

แต่เขาแก้ปัญหาด้วยการ เอาไอ้เจ้า sidebar ใส่ overflow:auto ซะเลย ก็ช่วยแก้ได้ครับ

==========================================

อันนี้ทางแก้ครับ
ไม่ว่าจะ sidebar สูงขึ้น หรือ content สูงขึ้น
ตัว wrapper จะ resize ตาม ทำให้ text ไม่ล้นครับ

ที่ทำคือ
<div id='wrapper'>
  <div id='sidebar'>
  </div>
  <div id='content' >
  </div>
</div>

#wrapper {
width:981px;
position:relative;
}

#sidebar {
float:right;
width:200px; /*ต้อง คำนวนหักจากความกว้าง #content - #wrapper */
}

#content {
float:left;
width:781px;
}

ส่วนที่เหลือ ต้องจัด layer เพิ่มอีกนิดหน่อย ก็น่าจะ ok ครับ
ขอบคุณทุกท่านที่ช่วยแชร์ อันนี้ผมลองกับ firefox ยังไม่ได้ลอง test กับ browser อื่นๆ

------------------
เจอเว็บนี้อีกเว็บ เขียนไว้ดีครับ
http://www.9lessons.info/2010/11/blog-design-with-css-and-html.html

[bomie]

ก่อนปิด. </div> ของ wrapper. คุณอาจจะลองใส่.

<div class="clear"></div>

.clear { clear:both }

เพื่อช่วยให้ wrapper มีค่าความสูง มันจะได้ไม้ไปซ้อน footer ครับ

[mod-heavy-mod]

ใช้ float ไม่ได้หรอครับ

[mod-heavy-mod]

ลองใช้ equal height columns ดูครับ
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

[thong_comsci7]

ลองดูแบบนี้นะครับ

<div style="width:700px; height:auto; background:#999; margin:auto 0">
   <div style="width:500px; height:auto; float:left; background:#F00">content</div>
    <div style="width:190px; height:auto; float:right; background:#0F0">content</div>
    <div style="clear:both">
</div>