Question

I am binding the selected values of autocomplete box into a div tag as

var data = "<div class='close'><table><tr><td rowspan='4' width='50px;'><img src='" + studentItem.Photo + "' Width='48' Height='48'  /></td><td>" + studentItem.Name + " ( <span class='stuId'>" + studentItem.StudentId + "</span> )</td><td align='right' ><div id='close' class='close16'/></td></tr><tr><td><table cellpadding='0' cellspacing='0'><tr><td>" + studentItem.Email + "</td><td>&nbsp;|&nbsp;</td><td>" + studentItem.Mobile + "</td></tr></table></td></tr></table></td></tr></table></div>";
            $('#students').css('background-color', '#FFAA55');
            $("#students").append(data);

and its binding the datas and displyaing in the div tag as

I want the each record should be in a seperate box, for example look at tag box in our stackoverflow

i want the result should be like this above…….I even tried to include the div script into a table, but it displays the single record in a whole row, and for the second record it comes to the second row,and I tried including the css inline,that also not working… how can I fix this, can anyone help me..

I tried to set the margin and float style to my div tag as

<tr>
    <td colspan="10" >
        <div id="students" style="float: left; clear: both; margin: 25px"></div>
    </td>
</tr>

i tried by setting the margin as 25px for testing purpose and now the output is

just the space coming between the textbox and div not among records within div, how can I fix this….

Answer 1

To separate the boxes, use margin. To get them to line up side by side, but wrapping, use float: left followed by a clear: both element, or use display: inline-block.