title: stop div resizing parent div using css
body: <h2><a href="http://jsfiddle.net/ETkkR/">http://jsfiddle.net/ETkkR/</a></h2>
  
  <pre><code>&lt;div id="Blog1"&gt;
      &lt;div class="post"&gt;
      &lt;img src="http://dummyimage.com/180x120/000/fff" alt="Image 1" title="This is my first image"/&gt;
          &lt;div class="post-info"&gt;
              &lt;span&gt;post title post title post title&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
      &lt;img src="http://dummyimage.com/175x104/f0f/fff" alt="Image 2" title="The second one is pretty"/&gt;
                  &lt;div class="post-info"&gt;
              &lt;span&gt;post title post title post title&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;        
  &lt;/div&gt;​
  </code></pre>
  
  <p>The div.post-info in some cases(images of width greater than the div.post-info content) fits the div.post parent however sometimes the width of the div.post-info is greater having an affect on the parent div.post by resizing it. how can i make the div.post-info fit the width of the div.parent and not resizing it if it is greater.</p>
  
  <h2>my css</h2>
  
  <pre><code>#Blog1{
      padding:10px;
  }
  #Blog1 .post{
      border:1px solid #000000;
      margin:3px;
      text-align:center;
      position: relative;
      display: inline-block;
      *display: inline;
      zoom: 1
  }
  .post img{
      height:100px;
  }
  .post .post-info{
      text-align:left;
  }
  .post .post-info span{
      word-wrap:break-word;
  }​
  </code></pre>
  
  <h2>Edit</h2>
  
  <p><strong>YOU CAN CHANGE THE ELEMENTS AS LONG AS THE CONTENT REMAINS SAME TO CREATE A SOLUTION</strong>
  people keep giving solutions which are not suitable for what i'm asking...what i need is for the child div .post-info to not be a greater width than that of the .post parent div</p>