html - How to align several text and images in CSS

Question

Have a look at this screenshot for my problem:

This is the html code:

   <div class="parent_process">  
      <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">Vous remplissez le formulaire pour exprimer votre besoin (env 1 min)</span></div>  
      <div class="second_process"><img src="images/contacter-tous-les-vendeurs-autocommutateurs.png"/><span style="width:18%">Vous remplissez le formulaire pour exprimer votre besoin (env 1 min)</span></div>  
     <div class="third_process"><img src="images/recevoir-offre-standard-telephonique-pas-cher.png"/><span style="width:18%">Vous remplissez le formulaire pour exprimer votre besoin (env 1 min)</span></div>  
</div>

This is css code:

.parent_process{ width:100%; white-space:nowrap; }
.parent_process div{ display:inline-block; width:33.3%;}
.first_process{ text-align:left; }
.second_process{ text-align:center; }
.third_process{ text-align:right; }

How can I have my 3 columns: 1)my text 1 | 2) my text 2 | 3) my text 3

Someone can help please?

Regards

Answer 1

Your three containers are the correct width, but the whitespace: nowrap style prevents the text from wrapping. So with overflow showing it just spills over.

If you remove whitespace: nowrap, your text will stay within the width of the container. However, you will notice a new problem. The columns do not fit on a single row: http://jsfiddle.net/q1g0uxx4/2/

This is because the columns will have almost no space in between - not even space for a single character. With inline block, that causes them to wrap

You can remove all the whitespace between your divs, and they will fit: http://jsfiddle.net/q1g0uxx4/1/

This isn't great for formatting though. Another way is to set the font-size of your container to 0.1px. Then it will fit even with formatted markup: http://jsfiddle.net/q1g0uxx4/3/