I've been tasked with implementing a design which incorporates the following requirements:
- Flowing width
- Line 1: input box, submit button
- Line 2: Logo image right aligned with the edge of the submit button above it
I also know that the text on this submit button will vary, i.e. with the language the current user has selected.
I can implement this in 30 seconds with tables, but I *hate* tables for layout. I have a rule against using tables for layout and I do *not* want to break it. How do I re-implement this exact layout without using tables? (Repeated 3 times only to exemplify the different possible submit button contents.)
--------------------------
----------
----------
----------
----------
----------
-
<html>
<body>
<table width='100%'>
<tr>
<td width='100%'><input type='text' style='width: 100%;'></input></td>
<td><input type='submit' value='Go'></td>
</tr>
<tr>
<td colspan='2' align='right'><img src='
http://www.google.com/logos/Logo_25wht.gif'></td>
</tr>
</table>
<hr>
<table width='100%'>
<tr>
<td width='100%'><input type='text' style='width: 100%;'></input></td>
<td><input type='submit' value='Gehen'></td>
</tr>
<tr>
<td colspan='2' align='right'><img src='
http://www.google.com/logos/Logo_25wht.gif'></td>
</tr>
</table>
<hr>
<table width='100%'>
<tr>
<td width='100%'><input type='text' style='width: 100%;'></input></td>
<td><input type='submit' value='Vada'></td>
</tr>
<tr>
<td colspan='2' align='right'><img src='
http://www.google.com/logos/Logo_25wht.gif'></td>
</tr>
</table>
<hr>
</body>
</html>
