Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

charly

Problema com DIV e Float

Mensagens Recomendadas

charly

Olá pessoas,

já a umas semanas que venho a procura da resposta para este problema ao qual nao encontro

Imaginem nada mais  nada menos que o seguinte:

<div>
  <img src="http://lalalla.com/xpto.png" style="width: 100px; height: 100px; float: left;">
  Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto.
</div>

<div>
  <img src="http://lalalla.com/xpto.png" style="width: 100px; height: 100px; float: left;">
  Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto.
</div>

Pelo que poderão estar a ver, inicialmente não tem problema, mas ele aparece quando passado para a visualização do browser.

Após a inserção do float como um style da imagem, esta deixa de forçar a altura da div a ser no minimo igual à sua temperatura, o que acontece é que  a div fica com apenas a altura do texto, e a imagem começa a influenciar a posição das outras imagens que entrem em contacto com outra que tenha o mesmo atributo float.

Alguém me pode ajudar na parte de continuar a ter a imagem com float, mas ao mesmo tempo que a div aumente a sua posição com os objectos do tipo float?

Este problema também me aparece quando uma DIV float esta dentro de uma DIV sem float

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
yoda

Após a inserção do float como um style da imagem, esta deixa de forçar a altura da div a ser no minimo igual à sua temperatura,

eheh ;)

Se quiseres que uma div extenda à altura do seu conteúdo, usa o clearfix : http://www.webtoolkit.info/css-clearfix.html

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
charly

Obrigado HappyHippyHippo e yoda , já a quase 1 ano que tenho este problema,

pelo menos já esta a funcionar, e para aqueles que tiverem a mesma dúvida, é muito facil, na div que irá contem objectos que tenham propriedades float, deverão ter as propriedades clear: both e display: inline-block

basicamente:

<div style="clear:both; display: inline-block;">
  <div style="float: left;">Texto</div>
</div>

LOL aquela parte da temperatura, foi porque na altura estava a pensar na temperatura do meu pc, que tem a grafica a chegar aos 108ºC

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.