Home/ Questions/Q 8092435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T20:16:58+00:00

Problem: I am trying to align divs next to each other using float:left but

  • 0

Problem:

I am trying to align divs next to each other using float:left but I can’t get it to work. Instead, they are aligning under each other.

PHP code:

while ($row = mysql_fetch_assoc($result))
{
    $kriterium .= '<div style="float:left;">'.$i.'</div>';
    $betyg .= '<div style="float:left;">'.$row['RID'].'</div>';

    $mean += $row['RID'];

    $i++;
}

$meanvalue = round ($mean / ($i-1), 2);

$kriterium .= '<div style="float:left;"><b>Medelv&auml;rde</b></div>';
$betyg .= '<div style="float:left;"><b>'.$meanvalue.'</b></div>';

$html .= '
    <div class="table table-condensed table-bordered neutralize">
        <div>
            <b>Kriterium</b>'.$kriterium.'
        </div>
        <div>
            <b>Betyg</b>'.$betyg.'
        </div>
    </div>';

Desired output:

enter image description here

Question:

What is wrong with the CSS code that needs to be modified so that divs are aligned like columns next to each other?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to set a width for each div. The width of the first div will be wider than the width of the other divs. 

    <!DOCTYPE html>
<html>
  <head>
    <title>Kexx</title>
    <style type='text/css'>
    div.table-bordered > div  {
      width:420px;
    }
    div.table-bordered > div > div.c {
      width:94px;
    }
    div.table-bordered > div > div {
      float:left;
      width:24px;
    }
    div.table-bordered div {
      border:1px solid #333;
    }
    </style>
  </head>
  <body>
    <div class="table table-condensed table-bordered neutralize">
      <div>
        <div class='c'><b>Kriterium</b></div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <br style='clear:both;'/>
      </div>

      <div>
        <div class='c'> <b>Betyg</b></div>
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <br style='clear:both;'/>
      </div>
    </div>

  </body>
</html>

    http://jsfiddle.net/Zv7Dp/

    • 0