Can someone please help me out with this little problem please. When I add the HTML code of 2 scripts on my webpage they show up like this on top of each other: Script 1 Script 2 What HTML code do I need to make them side by side on the same line like this: Script 1 Script 2 Thanks.
It's hard to say without seeing your specific code, but in a nutshell, wrap each script in a div like so: <div id="script1"> <!-- script1 goes here --> </div> <div id="script2"> <!-- script2 goes here --> </div> HTML: Then in your css: #script1{ width: 45%; float: left; } #script2{ width: 45%; float: right; } Code (markup):
The scripts are laid out like this: <!--Begin Mailing List Signup --> <table width="245" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border: 2px solid #000000;"> <form method="post" name="emailsubmit" action="http://business.eliteweb.cc/addemail.cgi" target="_blank"> <tr> <td height="20" align="center" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;color: #000000;">Join Our Mailing List</td> </tr> <tr> <td height="1" bgcolor="#000000"></td> </tr> <tr> <td height="1" bgcolor="#FFFFFF"></td> </tr> <tr> <td height="1" bgcolor="#000000"></td> </tr> <tr> <td height="30" align="center" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #000000;"><b>Email:</B> </b> <INPUT size=17 name=email> <INPUT style="FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 23px" type=submit value=" Join " name=go><input type="hidden" name="bid" value="ZZ/3977"><input type="hidden" name="action" value="supform"></td> </tr> <tr> <td height="16" align="center" valign="middle" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;">Powered By <a href="http://www.eliteemail.com" target="_blank"><font color="#000000">Elite Email Marketing</font></a></td> </tr> </form> </table> <!--End Mailing List Signup --> <iframe style='width:321px; height:300px; overflow-x:hidden;' frameborder='0' name='proprofs' id='proprofs' src='http://www.proprofs.com/polls/widget/?title=will-irvine-ever-be-found&theme=grey&width=300'></iframe><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/polls/poll/?title=will-irvine-ever-be-found' target='_blank' title='Will Irvine Ever Be Found?'>Will Irvine Ever Be Found?</a> » <a href='http://www.proprofs.com/polls/' target='_blank' title='polls'>polls</a><br />Tags : <a href='http://www.proprofs.com/polls/online-polls/?topic=mount' target='_blank' title='mount'>mount</a> <a href='http://www.proprofs.com/polls/online-polls/?topic=everest' target='_blank' title='everest'>everest</a> <a href='http://www.proprofs.com/polls/online-polls/?topic=mountaineering' target='_blank' title='mountaineering'>mountaineering</a> <a href='http://www.proprofs.com/polls/online-polls/?topic=climbing' target='_blank' title='climbing'>climbing</a></div>
Do NOT float it right for something like this. what you want to do is <div id="script1"> <!-- script1 goes here --> </div> <div id="script2"> <!-- script2 goes here --> </div> #script1{ width: 45%; float: left; } #script2{ float: left; width: 45%; }
you use table, may be it should be like this... do not open a new row(tr) for your script2 but open a new column (td) <table> <tr> <td>Script1</td> <td>Script2</td> </tr> </table> Code (markup):
Well, I think it's not really possible to determine this based on the fact that we know nothing about the rest of yoda'a layout. But anyway based on the code posted, and at least now knowing the width of the elements, you might try the following: <div id="script1"> <!-- script1 goes here --> <!--Begin Mailing List Signup --> <table width="245" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border: 2px solid #000000;"> <form method="post" name="emailsubmit" action="http://business.eliteweb.cc/addemail.cgi" target="_blank"> <tr> <td height="20" align="center" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;color: #000000;">Join Our Mailing List</td> </tr> <tr> <td height="1" bgcolor="#000000"></td> </tr> <tr> <td height="1" bgcolor="#FFFFFF"></td> </tr> <tr> <td height="1" bgcolor="#000000"></td> </tr> <tr> <td height="30" align="center" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #000000;"><b>Email:</B> </b> <INPUT size=17 name=email> <INPUT style="FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 23px" type=submit value=" Join " name=go><input type="hidden" name="bid" value="ZZ/3977"><input type="hidden" name="action" value="supform"></td> </tr> <tr> <td height="16" align="center" valign="middle" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;">Powered By <a href="http://www.eliteemail.com" target="_blank"><font color="#000000">Elite Email Marketing</font></a></td> </tr> </form> </table> <!--End Mailing List Signup --> </div> <div id="script2"> <!-- script2 goes here --> <iframe style='width:321px; height:300px; overflow-x:hidden;' frameborder='0' name='proprofs' id='proprofs' src='http://www.proprofs.com/polls/widget/?title=will-irvine-ever-be-found&theme=grey&width=300'></iframe> <div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'> <a href='http://www.proprofs.com/polls/poll/?title=will-irvine-ever-be-found' target='_blank' title='Will Irvine Ever Be Found?'>Will Irvine Ever Be Found?</a> >> <a href='http://www.proprofs.com/polls/' target='_blank' title='polls'>polls</a> <br />Tags : <a href='http://www.proprofs.com/polls/online-polls/?topic=mount' target='_blank' title='mount'>mount</a> <a href='http://www.proprofs.com/polls/online-polls/?topic=everest' target='_blank' title='everest'>everest</a> <a href='http://www.proprofs.com/polls/online-polls/?topic=mountaineering' target='_blank' title='mountaineering'>mountaineering</a> <a href='http://www.proprofs.com/polls/online-polls/?topic=climbing' target='_blank' title='climbing'>climbing</a> </div> </div> HTML: and for the css: #script1{ float: left; } #script2{ margin-left: 255px; } Code (markup): This will give you 10px of space between the 2 scripts and no need to float script 2. Optionally. viewz suggestion of making a new table column for your script 2 would work and may be the better solution if the rest of your page is laid out with tables. Although table based layouts are a thing of the past and if this is the case, you should really be learning how to layout your site with CSS.