html table problem

[zinja]

I am trying to get the image to show in a row next to the form, instead of above it. The image (realtorsmall.gif) is showing on the left and the form on the right, but the image is above the form. How do I get the image to show beside the form? Here is my code...

echo table_header ( $lang['Realtor_Search'], ' <img src="templates/default/images/realtor_logo_small.gif" width="17" height="21">' );

echo '
<form action="' . URL . '/usersearch.php" method="POST">
 <table width="100%" cellpadding="5" cellspacing="0" border="0">
     ';
echo '	<tr>
       <td width="70%" align="left" valign="top" <img src="templates/default/images/RealtorSmall.gif">
	   </td>
</tr>';
echo userform ($lang['Realtor_First_Name'], '<input type="text" size="45" name="realtor_first_name" maxlength="255">');
echo userform ($lang['Realtor_Last_Name'], '<input type="text" size="45" name="realtor_last_name" maxlength="255">');
echo userform ($lang['Realtor_Company_Name'], '<input type="text" size="45" name="realtor_company_name" maxlength="255">');
echo userform ($lang['Search_Keyword'], '<input type="text" size="45" name="realtor_description" maxlength="100">');
echo userform ($lang['Location'], '<select name="realtor_location"><option value="ANY" SELECTED>' . $lang['Search_Any'] . ' ' . $lang['Location'] . '</option>' . generate_options_list(LOCATIONS_TABLE) . '</select>');
echo userform ($lang['City'], '<input type="text" size="45" name="realtor_city" maxlength="50">');
echo userform ($lang['Zip_Code'], '<input type="text" size="45" name="realtor_zip_code" maxlength="20">');

// Submit button
echo userform ('', '<input type="Submit" name="realtor_search" value="' . $lang['Realtor_Search'] . '">');

echo '
 </table>
</form>
';

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[jpadie]

in table_header() you have misspelled $width (you typed $widthe) in the first line of code.

 

[zinja]

Duh. I apologize for that. Correcting my spelling did remove the error, however the image is still on the top left and the form is on the bottom right.

Here is the web page link (probably should have gave that to you sooner.

LINK

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[jpadie]

it appears to be working now. the key thing to remember is that the <img> tag is an inline element so a browser does not insert a line break after it. that is why you need to make sure that the browser does not take up more of the screen width than remains for the table. you could do this for sure by removing the table width attribute. alternatively you could migrate to a pure css solution and abandon the table altogether. for this to work you would wrap the image in a div tag and the form in a div and then float them both (or at least the second) to the left. so long as you set the width of the div tags appropriately (or used a span instead of a div) then the form will always arrange itself to the right of the image. I'm (greatly) over-simplifying here: there are pitfalls with browser differences and css but the basis is true!