Question

I have setup JsFiddle Example

<div id="fsUploadProgress">
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144111111111111111.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo01441111.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144111111.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
</div>

What I want all Divs of class “progressContainer” should be show completely in one line if you see in example some times its partly showing in one line and remaining is showing next line.

Sorry I am very new in css please help me

Answer 1

Add to .progressWrapper

margin-right:auto;
float:left;