EronRA

Boa tarde,

O assunto pode ser repetido, mas procurei em vários lugares e nenhuma suposta solução conseguiu ajudar.
Estou tentando alinhar três divs lado a lado como mostra a imagem:



A div1 e a div3 terão conteúdos fixos e na div2 estará todas as informações a serem modificadas.

O problema é que usando float:left na primeira e segunda, e na terceira float:right, conforme a resolução diminui a div 3 invade o espaço das outras ou sai do alinhamento e fica embaixo das divs.
Coloquei display:inline, position:relative, mas nada adiantou.

Segue o código fonte:

Body:

<!-- COMEÇO DA DIV TUDO -->

<div id="tudo">

<!-- COMEÇO DA DIV LATERAL -->

<div id="lateral">

<div id="logo"><img src="images/logo/logo-m&m-imoveis-e-seguros.jpg" /></div>

<div class="telefone"></div>

<div id="casalateral"><img src="images/background/casa.jpg" /></div>

<!-- Começo da div BUSCA -->

<div id="busca"><div class="busca">Busca de Imóveis

<div id="formulariobusca">

<table width="174" border="0" align="center" cellpadding="0" cellspacing="2">

<tr>

<td colspan="2"><select name="timo" class="busca" id="timo">

<option value="0">Tipo de Imóvel</option>

<? while($row = mysql_fetch_assoc($r)){?>

<option value="<?= $row['ID_T_IMO'] ?>"><?= $row['TIPO'];?></option>

<? } ?>

</select></td>

</tr>

<tr>

<td colspan="2">

<?

$q ="SELECT ID_TIPO_NEGOC, NOME FROM `tipo_negoc` ORDER BY NOME";

$r= mysql_query($q, $conn_geraldo);

?>

<select name="tneg" class="busca" id="tneg">

<option value="0">Categoria</option>

<? while($row = mysql_fetch_row($r)){?>

<option value="<?= $row[0]?>"><?= $row[1]?></option>

<? } ?>

</select></td>

</tr>

<tr>

<td colspan="2">

<?

$q ="SELECT ID_CIDADE, CIDADE FROM `cidade` ORDER BY CIDADE";

$r= mysql_query($q, $conn_geraldo);

?>

<select name="cid" class="busca" id="cid">

<option value="0">Cidade</option>

<? while($row = mysql_fetch_row($r)){?>

<option value="<?= $row[0]?>"><?= $row[1]?></option>

<? } ?>

</select></td>

</tr>

<tr>

<td colspan="2">

<?

$q ="SELECT ID_BAIRRO, BAIRRO FROM `bairro` ORDER BY BAIRRO";

$r= mysql_query($q, $conn_geraldo);

?>

<select name="bairro" class="busca" id="bairro">

<option value="0">Localização</option>

<? while($row = mysql_fetch_row($r)){?>

<option value="<?= $row[0]?>"><?= $row[1]?></option>

<? } ?>

</select></td>

</tr>

<tr>

<td class="txt-busca">Valor R$:</td>

<td><input type="text" name="p_min" class="busca1" id="p_min"/></td>

</tr>

<tr>

<td class="txt-busca">Até R$:</td>

<td><input type="text" name="p_max" class="busca1" id="p_max"/></td>

</tr>

<tr>

<td class="txt-busca">Ref:</td>

<td><input name="ref" type="text" class="busca1" id="ref" /></td>

</tr>

<tr>

<td colspan="2" align="left"><input name="button" type="submit" class="bt-pesquisar" id="button" value="Pesquisar" /></td>

</tr>

</table>

</div></div>

</div>

<!-- FIM DA DIV BUSCA -->

<!-- COMEÇO DA DIV NEWSLETTER -->

<div id="cadastre"><img src="images/imagens/cadastre-seu-imovel.jpg" /></div>

<div id="newsletter" class="newsletterfont">

<form id="form1" name="form1" method="post" action="">

<table width="186" border="0" align="center" cellpadding="0" cellspacing="2" id="mover-newslleter">

<tr>

<td class="txt-news">Cadastre seu e-mail</td>

</tr>

<tr>

<td><input name="nome" type="text" class="form-news" id="nome" value="Nome" /></td>

</tr>

<tr>

<td><input name="mail" type="text" class="form-news" id="mail" value="E-mail" /></td>

</tr>

<tr>

<td align="left"><input name="button2" type="submit" class="bt-pesquisar" id="button2" value="Cadastrar" /></td>

</tr>

<tr>

<td class="txt-news">e receba novidades.</td>

</tr>

</table>

</form>

</div>

<!-- FIM DA DIV NEWSLETTER -->

<div id="espaço"></div>

</div>

<!-- FIM DA DIV LATERAL -->

<!-- COMEÇO DA DIV MEIO -->

<div id="meio">

<div id="menumeio"><img src="images/menu/nada.png" /></div>

<!-- COMEÇO DA DIV CONTEUDO -->

<div id="conteudo">

<img src="images/fale-conosco.jpg" />

</div>

<!-- FIM DA DIV CONTEUDO -->

</div>

<!-- FIM DA DIV MEIO -->

<!-- COMEÇO DA DIV LATERAL2 -->

<div id="lateral2">

<div id="menulateral"><img src="images/menu.png" /></div>

<div><img src="images/imagens/seguros.gif" /></div>

</div>

<!-- FIM DA DIV LATERAL2 -->

</div>

<!-- FIM DA DIV TUDO -->

CSS

body{

padding:0;

margin:0;

border:0;

background-color: #DDDDDD;

}



#tudo{

margin-left:0;

margin-right:0;

width:100%;

}



#lateral{

margin-left:10px;

width:258px;

text-align:center;

background-color:#333333;

float:left;

display:inline;

clear:both;

}



#casalateral{

margin-top:20px;

}



#busca{

margin-top:30px;

}



#formulariobusca{

margin-top:10px;

text-align:left;

}



#cadastre{

margin-top:40px;

}



#newsletter{

margin-top:30px;

text-align:left;

}



#espaço{

height:40px;

}



#meio{

width:33%;

float:left;

}



#menumeio{

margin-left:auto;

margin-right:auto;

}



#conteudo{

height:300px;

}



#lateral2{

text-align:center;

float:left;

}



#menulateral{

width:183px;

height:152px;

}

Por favor, se alguém puder ajudar.

Obrigado,
Eron.