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.