Aligning div css properties

Question

      <form>         
            <div id="data" name="data" class='checkbox' style='overflow:auto;width:30%;border:1px solid #ccc;height:550px;margin-left:10px;display:inline;'></div>
                <div name="r_data" id="r_data" > </div>
       </form>

In the above i populate the data dynamically from jquery. What should be the second div's property? So that the first and second div appear one beside each other.

Answer 1

<form>         
  <div id="data" name="data" class='checkbox' style='overflow:auto;width:30%;border:1px solid #ccc;height:550px;margin-left:10px;display:inline;float:left;'></div>
  <div name="r_data" id="r_data" style="float:left"> </div>
</form>

Answer 2

There are a few approaches depending on the exact layout you want. For example you can float the left div:

#data { float: left; }

And the right would bud up against it (probably what you want since it has a width set).

You can test it out here.

The alternative is to float the right div to the right with a style="float: right;" or #r_data { float: right }, but with lack of wide-enough content, this would leave white-space in the middle, so I thought this is what you're after.

Answer 3

Why don't you use jQuery to do this? justy after populating the data div, move the r_data into data div like this:

$('#data').html('some content for data field').next().appendTo('#data');

Answer 4

use the propery style="float:left"