help with dynamic html 1

[jrenae]

Hello,

I have page that allows users to choose automobile makes from a checkbox list, uses ajax to get the associated models, and then dynamically builds a table for each make for display. It all works great except I can't get the layout of the individual tables to flow next to eachother, rather than stacking on top of eachother. I have a static div on the page in which I place the dynamically built tables of makes. the code for that is below:

<tr>
  <td colspan="2">
    <div id="divPlaceSpecDep" runat="server" style="float:left"></div>
 </td>

If I choose 2 makes (say Acura and BMW) I will have 2 dynamically built tables. The result of the dynamically built html for that is below:
The question is how can I get these 2 tables to be side by side rather than stacking on top of eachother?

Thanks in advance

<TABLE id=tbMake1 border=1>
<TBODY>
<TR>
<TD><IMG id=imgtbDisplayMake1 onclick="showhide('tbDisplayMake1');" src="[URL unfurl="true"]http://localhost:5000/App_Themes/LMP/Images/Plus.gif">&nbsp;Acura</TD></TR>[/URL]
<TR>
<TD>
<TABLE id=tbDisplayMake1 style="DISPLAY: none; FLOAT: left" border=1>
<TBODY>
<TR>
<TD><SELECT class=formmultiselectsmall multiple name=Models1><OPTION value="">All</OPTION><OPTION value=MDX>MDX</OPTION><OPTION value=RDX>RDX</OPTION><OPTION value=RL>RL</OPTION><OPTION value=TL>TL</OPTION><OPTION value=TSX>TSX</OPTION></SELECT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><INPUT type=hidden value=Acura name=Make1>
<TABLE id=tbMake2 border=1>
<TBODY>
<TR>
<TD><IMG id=imgtbDisplayMake2 onclick="showhide('tbDisplayMake2');" src="[URL unfurl="true"]http://localhost:5000/App_Themes/LMP/Images/Plus.gif">&nbsp;BMW</TD></TR>[/URL]
<TR>
<TD>
<TABLE id=tbDisplayMake2 style="DISPLAY: none; FLOAT: left" border=1>
<TBODY>
<TR>
<TD><SELECT class=formmultiselectsmall multiple name=Models2><OPTION value="">All</OPTION><OPTION value=328>328</OPTION><OPTION value=335>335</OPTION><OPTION value=525>525</OPTION><OPTION value=528>528</OPTION><OPTION value=530>530</OPTION><OPTION value=535>535</OPTION><OPTION value=550>550</OPTION><OPTION value=650>650</OPTION><OPTION value=750>750</OPTION><OPTION value=760>760</OPTION><OPTION value="Alpina B7">Alpina B7</OPTION><OPTION value=M>M</OPTION><OPTION value=M5>M5</OPTION><OPTION value=M6>M6</OPTION><OPTION value=X3>X3</OPTION><OPTION value=X5>X5</OPTION><OPTION value=Z4>Z4</OPTION></SELECT></TD></TR></TBODY></TABLE></TR></TBODY></TABLE><INPUT type=hidden value=BMW name=Make2>

 

[BabyJeffy]

Here's a thought...

<style type="text/css">
#tbMake1, #tbMake2 {float:left;}
</style>
...
[!]<div style="position:relative;">[/!]
<TABLE id=tbMake1 border=1>
...
</TBODY></TABLE><INPUT type=hidden value=BMW name=Make2>[!]</div>[/!]

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[jrenae]

Thanks, Jeff! That did the trick! Although, I didn't need the postion relative in the div tag. Just putting the float left in the dynamic table did it.