[RESOLVIDO]CSS: Colocar duas tabelas lado a lado sem o uso de uma tabela pai

Assuntos Gerais
#1

Olá pessoal.
Preciso exibir duas tabelas no IE 7, uma do lado da outra, porém sem usar uma tabela pai. Pra facilitar, vai aí um código exemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Tests</title>
	</head>
<body>
	<table width="500px" border="1">
		<tr>
			<td width="90%">
				<div id="inliner" style="width: 100%; background-color: #dddddd">
					<div style="position:static; display: inline; border: solid #000000 1px; background-color: #aaaaaa;">
						<table id="leftTable" style="margin-left: 15px;">
							<tr>
								<td>
									<span>
										<img src="bullet.jpg" />
										<span>Esquerda</span>
									</span>
								</td>
							</tr>
							<tr>
								<td>
									<input type="text" size="18">
								</td>
							</tr>
						</table>
					</div>
					<div style="position:static; display: inline; border: solid #000000 1px; background-color: #aaaaaa;">
						<table id="rightTable" style="margin-left: 15px;">
							<tr>
								<td>
									<span>
										<img src="bullet.jpg" />
										<span>Direita</span>
									</span>
								</td>
							</tr>
							<tr>
								<td>
									<input type="text" size="18">
								</td>
							</tr>
						</table>
					</div>
				</div>
			</td>
			<td>
				<input type="submit" value="OK">
			</td>
		</tr>
	</table>
</body>
</html>

Não devo mexer muito na estrutura desse código. Tentei utilizar a propriedade display com o valor inline nas tabelas leftTable e rightTable, porém, o resultado que obtive foi uma coisa nada a ver (vide anexo “!1wrong.bmp”). Eu queria algo como o anexo “!2desired.bmp”, mas não consigo…
O interessante é que se o conteúdo das divs que estão com “display: inline” for apenas um texto simples, aí fica certinho…
Será que não tem jeito mesmo?



#2

Coloca um “float: left;” no style dos divs…

#3

Pra colocar lado a lado vc usa:

	<div style="float:left;">ESQUERDA</div>
	<div style="float:left;">DIREITA</div>

— EDITADO —

foi mal renato vc acabou postando enquanto eu estava escrevendo a minha resposta :slight_smile:

#4

Muitíssimo obrigado pessoal! Ficou perfeito!

#5