title: how to force a div to expand to its content?
body: <p>although my questions has been answered lots of times before, but all the proposed solution I have tried and nothing seems to work.</p>
  
  <ul>
  <li><p>what am trying to do is a big div that contains li tags; the li tags will also contain anchor tag, 2 divs and p tag.</p></li>
  <li><p>to understand the big picture.. am trying to make a posting wall (activity-board), the wall will have posts looks like a bubble (div post) and the bubble will point (post-arrow) to a thumbnail image (a thumb3), to make the bubble style I made the post div absolute positioned with z-index less than the arrow-post.</p></li>
  <li><p>and here is my css:</p>
  
  <pre><code>.activity-board {
  
  background:#fff;
  width:600px;
  min-height:652px;
  height:auto;
  border:solid 2px #e7d28d;
  border-radius: 6px; 
  -moz-border-radius: 6px; 
   -webkit-border-radius: 6px;
  -webkit-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
   box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
   float:left;
   margin-left:20px;
  
   }
  
     .post-body{
      position:relative;
      display:block;
      list-style-type:none;
      width:600px;
      height:auto;
      background:#f9f9f9;
      border-bottom:1px solid #CBCBCB;
      border-radius:4px 4px 0 0; 
      -moz-border-radius:4px 4px 0 0; 
          -webkit-border-radius:4px 4px 0 0;
      background: #fff;
      float:left;
      overflow:visible;
      clear:both;
      z-index:9;
      }
  
  .post{
  
  position:absolute;
  width:500px;
  line-height:20px;
  height:auto;
  background:#FFF;
  display:block;
  margin-top:22.5px;
  margin-left:77px;
  text-align:left;
  float:left;
  z-index:1;
  
  }
  
  .post-arrow{
  
   position:relative;
   margin-top:32px;
   margin-left:6px;
   width:12px;
   height:18px;
   background:url(images/post-arrow.png);
   float:left;
   z-index:5;
  
   }
  
  .post p{ color:#025373; padding:8px; word-wrap:break-word; }
  
  a.thumb-3 { 
  
  margin-top:18px;
  display:block;
  margin-left:18px;
  width:46px;
  height:46px;
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;
  z-index:10;
  float:left;
  
  }
  
  
  a.thumb-3 img{
  
  padding:0;
  margin:0 auto;
  width:46px;
  height:46px;
  float:left;
  border-radius:3px; 
  -moz-border-radius:3px; 
  -webkit-border-radius:3px;
  
  }
  </code></pre></li>
  <li><p>here is my html:</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li class="post-body"&gt;
        &lt;a class="thumb-3"&gt;&lt;img src="images/Alsheikh Center (177).jpg" /&gt;&lt;/a&gt;
        &lt;div class="post-arrow"&gt;&lt;/div&gt;
  
        &lt;div class="post"&gt;
          &lt;p&gt;
          Hi there!
          &lt;/p&gt;
  
       &lt;/div&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre></li>
  </ul>
  
  <p><a href="http://jsfiddle.net/r9YpX/" rel="nofollow">http://jsfiddle.net/r9YpX/</a></p>
  
  <p>Everything worked fine but the li tag does not expand to the content.. it only expands if I change the position of the post div to relative not absolute, which I cant change because it must be absolutely positioned under the arrow image to give it the bubble look.</p>
  
  <p>any help would be appreciated.</p>
  
  <p>Thanks.</p>