Julien S Julien S - 2 years ago 67
CSS Question

Setting several elements to a fixed position

I'm creating a survey, when the user answers he gets the percentage of each answer with horizontals bars.

My problem is that at the moment this looks like that (== are bars):

  • Answer A : ======= 50%

  • Answer The Answer B === 25%

  • Answer C Blabla === 25%

I would like to have all my bars that start at the same point.

Here is my code :

<div class="bloc-result">
Answer A <div class="survey_bar" style="height:15px; margin-left:10px; margin-right:10px; display: inline-block; width:200px; color:white; background:#4AB4E6;" ;=""></div>50%<br>

Answer B and C are alike.

I would like to have the CSS proprety that solve my problem. I checked the position "absolute" but this sounds like 0% responsive and good to use.

Answer Source

try something like this:

foreach($aData['Resultat'] as $iKey => $aVal) {
      $sHtml = '<div class="row">
                  <div class="cell">'.$aVal['REPONSE_LIB'].'</div>
                  <div class="cell">
                    <div class="barre_sondage" style="...blah blah..."></div>'.round($aVal['RESULTAT'],2).'%
      echo $sHtml;

and CSS:

  display: table-row;
  display: table-cell;

i also recomend you to wrap whole thing into div with display: table;

EDIT: you can just wrap answer with element with display: inline-block and fixed width too, but you will loose responsiveness

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download