I am developing php web application. I have a form with the fields. All the fields are in a table. Now to create a suggestion box for a text field which has to give auto complete results, my css is ruining the complete page. I just started learning CSS and I am not a pro at it.

For the suggestion box I have created a div tag which is invisible and has some width etc.,
the following the table and a field in the form

<td style='width: 150px'><label id = 'Label7'>Tags&nbsp<font color='red'><em>*</em></label></td>
<td><input name='tag' style='width: 150px' tabindex='7' type='text' onkeyup='showTags(this.value)'/>
<div id ='suggestionDiv'></div></td>

Keeping the div in the column expands the row and pushes the rest of the elements to the bottom of the page.
Keeping the div tag in a new row pushes the complete table to the bottom of the page. And my page container doesn't expand if the form size increases. I need some help with it.

Attached are is my css and the image file for clear picture of what I am saying. I need quick help from experts. I would appreciate your help.


First of all, in your code snippet on line 2 you're missing a closing 'font' tag </font> .

Second if I understood your problem correctly, the reason why this is happening is because a <div> is a 'block' element, which means that it will display as it's own line, as if as it were a 'block' pushing everything else away, try giving the <div> a style of display: inline; that should make it stay inline, and not push everything around...