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.
