Question

My wrapper div css;

.post-wrapper{
  width:200px;
   min-height:50px;
  }

ul list css for .post-wrapper;

.post-wrapper ul{
   margin:0;
   padding:0;
   width:200px;
 }

.post-wrapper ul li{
   margin-bottom:2px;
   padding:0;
   list-style:none;
   text-align:center;
   width:200px; 
   float:left;   
 }

HTML

<div class="post-wrapper">
 <ul>
   <li>Item-1</li>
   <li>Item-2</li>
   <li>Item-3</li>
   <li>Item-4</li>
   <li>Item-5</li>
   <li>Item-6</li>
   <li>Item-7</li>
 </ul>
</div>

There is no problem for 5 list item (li) but after 5 post-wrapper don’t stretch. How can solve this problem?

Answer 1

Your problem may be the float:left on the li element
Try:
1. add position:relative to the wrapper container
2. add a clearing div to the bottom of the wrapper

<div class="post-wrapper">
 <ul>
   <li>Item-1</li>
   <li>Item-2</li>
   <li>Item-3</li>
   <li>Item-4</li>
   <li>Item-5</li>
   <li>Item-6</li>
   <li>Item-7</li>
 <div style="clear:both; width:100%"></div>
 </ul>
</div>

1. remove float from li