Postei esse tópico pois já tenho essa dúvida há muito tempo e novamente ela não me deixou dormir nesse finde.
Imaginem um layout em que duas divs estão lado a lado seguidas de um rodapé: a de nº 1 com float:left e outra, nº 2, com posicionamento relativo por exemplo ao lado da 1ª e o rodapé, nº3, com clear:both, admitindo toda a largura proposta para o site. Dentro da div de nº2 ela contém uma imagem também com float left, um texto que segue ao lado da imagem naturalmente e uma outra div, nº4 que precisa não acompanhar o float da imagem, ok? Essa div precisa vir logo abaixo da imagem assim que o texto ao lado dessa mesma imagem acaba. Aí é que mora a questão!!! Se aplicarmos clear:left na div nº 4, ela não segue logo abaixo da imagem ou do texto ao lado da mesma imagem, ela simplesmente quebra o float e vai lá para o final da altura da div nº1 !!!! Impressionante esse bug!!! O clear: left quebra toda a incidência de float:left na página!
Odeio trabalhar com tabelas, mas por incrível que pareça, acho que seria a única solução a ser feita.
Se vocês puderem me ajudar, agradeço muito! Não gostaria de sujar o layout todo elaborado em tableless por causa de um posicionamento que parece tão simples, não é mesmo?
Já procurarei em todos os lugares: positoneverything e seu clearfix, reestudei a propriedade float, consultei os tópicos daqui do fórum que diziam respeito a isso, mas não encontrei nada! Se existir alguma outra forma de fazer a div 4 descer sem quebrar o float total da página, continuando a esquerda sem restringir a altura do texto ao lado da imagem seria formidável, mas acredito que não exista...
Segue código para vocês conferirem ou o anexo abaixo para quem preferir:
<div id="container"> <div id="esquerda" style="float:left; width:200px; height:500px; background-color:#CCCCCC"> Essa div tem float:left e uma altura estabelecida ou pode ter qualquer elemento que tenha a altura maior do que o conjunto da imagem do google ao lado, por exemplo.</div> <div id="direita" style="margin-left:250px;"> <img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" width="276" height="110" style="float:left" /> <p>A imagem ao lado também tem float:left e o texto abaixo deve ser posicionado abaixo dela, mas não quebrando todo o layout com a altura da div cinza. Esse texto ao lado pode crescer sem especificação de altura fixa. Será que a tabela é a solução???</p> <div id="clearDentro" style="clear:left; background-color:#FF6600">Quebrar apenas o float interno e não ter que descer toda a altura da primeira div com float. O clear left não funciona, nem mesmo o clearfix do site positioneverything. A div deveria ficar exatamente abaixo da imagem do Google e não ter que descer toda a altura da div com clear:float de fora dessa div, concordam?</div> </div> <div id="clearFora" style="clear:all; background-color:#66CCCC "> div de fora, com clear: both. Essa div se posiciona normalmente. </div> </div>
Agradeço a atenção de todos!
Attached Files
-
teste_positioning.htm 1.56KB
13 downloads
