[Resolvido] definir altura de elemento float

[Vládia Queiroz 0]

Oi pessoal,

 

Quebrei a cabeça tentando fazer 3 colunas porque os códigos que tinha conseguido (que trabalhavam com %) não funcionavam e a coluna da direita sempre ficava uma linha abaixo, mesmo que permancesse à direita. O código ficou assim:

 

<div style="float:left; margin-left:0px"> imagem </div>

<div style="float:left; margin-left:80px"> imagem </div>

<div style="float:right; margin-left: 100px"> imagem </div>

<div style="clear:both"></div>

 

Agora o problema. O elemento central tem altura diferente dos outros dois (que tem a mesma altura), e eu gostaria de alinha-lo aos outros pela base. Já tentei usar o height mas não reconhece. Tem alguma maneira de ajustar a altura? de fazer o alinhamento??

[William Bruno 1501]

Faux Columns

 

http://maujor.com/tutorial/lay2col-faux-colunm.php

sem imagens:

http://forum.imasters.com.br/index.php?/topic/309442-solucao-para-faux-columns-sem-usar-imagens/

[Vládia Queiroz 0]

Oi william,

 

dei uma olhada no seu tutorial e no do Maujor, mas continuo com dúvidas. No caso do alinhamento que você fez entre as colunas, pelo que vi no exemplo foi pela parte de cima das colunas e eu quero alinhar pela base.

 

você pode ser um pouco mais específico comigo, porque tenho pouco conhecimento em html, tô aprendendo.

 

obrigada,

[William Bruno 1501]

não entendi.

 

o texto começa 'de cima'.

a altura das colunas é a mesma.

 

no caso, acho que você não viu completamente:

resultado:

http://wbruno.com.br/scripts/comFauxColumns.html

 

é esse resultado que você quer, não ?

[Vládia Queiroz 0]

não, é justamente o contrário. deixa eu te explicar melhor: tenho 3 imagens, a da esquerda e a da direira têm o mesmo tamanho, a imagem central é menor. o que quero é alinha-las da seguinte forma:

 

( ) ___ ( )

 

imagine que os parênteses são as imagens maiores e o traço é a imagem menor, ou seja, quero alinha-las pela base delas.

 

na minha página a imagem da esquerda é um widget do twitter de pesquisa, a imagem da direita um streaming, e no centro eu tenho um widget do twitter para inserir mensagens direto do site, ou seja, é uma caixa de texto, com altura de +- 70px. e como essas informações ficam na parte inferior da página quero alinha-las pela base, endendeu?

[William Bruno 1501]

poste uma imagem do layout.

[Evandro Oliveira 331]

Creio que as três colunas estão dentro de um contêiner em comum que também possui um elemento de 'clear', correto?

 

Este contêiner em comum, vai levar a imagem de plano de fundo do painel central, alinhando-a da maneira que você precisa:

<div id="conteiner">
   <div id="esq"></div>
   <div id="meio"></div>
   <div id="dir"></div>
   <div id="clear"></div>
</div>

 

#conteiner { background: url('bgdomeio.jpg') center bottom no-repeat; }
#esq { float: left; width: 200px; }
#meio { margin: 0 200px; }
#dir { float: right; width: 200px;}

[Vládia Queiroz 0]

poste uma imagem do layout.

 

oi william,

 

você pode ver a imagem do layout na página do meu projeto:

 

http://bootteleperformance.blogspot.com/p/plataforma.html

 

é a imagem denominada PLATAFORMA, observe a localização das imagens inferiores. ok?

 

obrigada pela atenção

[William Bruno 1501]

tá... só o wireframe não define a melhor estratégia nesse caso.

 

as vezes, você pode ter pensado num recorte, que não é o 'mais simples', ou eficaz..

por isso queria ver o 'layout' mesmo.

 

o twitter, e o outro ali da direita, têm alturas fixas?

se tiverem, basta espaçar a do meio com margin/padding.

 

se não, poste realmente uma imagem do layout final.

[Vládia Queiroz 0]

tá... só o wireframe não define a melhor estratégia nesse caso.

 

as vezes, você pode ter pensado num recorte, que não é o 'mais simples', ou eficaz..

por isso queria ver o 'layout' mesmo.

 

o twitter, e o outro ali da direita, têm alturas fixas?

se tiverem, basta espaçar a do meio com margin/padding.

 

se não, poste realmente uma imagem do layout final.

 

oi William,

 

o layout está em construção, o que tenho até agora é isso que está abaixo, mas ainda falta a parte do meio, aquele retângulo que você viu no desenho. quem está fazendo não sou eu, porque é em flash e eu não entendo nada de flash.

 

 

também pode visualizar pelo link, acho que o tamanho fica maior:link

 

vou esperar você responder e depois vou retirar a imagem, porque esse projeto faz parte da minha pesquisa de mestrado em artes cênicas e ainda não deve ser divulgado, ok?

[William Bruno 1501]

faz dessa forma então.. 3 colunas com float

 

colocando um margin-top na coluna do meio, para nivelar.

Ou, usando position: absolute; bottom: 0; em ambas.

 

tendo um container comum, com height definido.

[Vládia Queiroz 0]

coloquei diferente, usei ao final: <div style="clear:both">

 

esse código que você colocou, como devo usá-lo em relação aos elementos da página? as três colunas são, cada uma, um elemento, respectivamente: widget/widget/stream

 

então os códigos de cada elemento devem ficar como em relação a esse código que você colocou?

 

obrigada pela atenção

[No Rain 0]

Oi Vládia,

 

Seguindo a idéia básica de alinhar a div do meio na base, aconselho a trocar teu "float left" por "inline-block". A propriedade inline-block determina que suas divs sejam criadas na mesma linha (similar ao float left). Essa linha recebe a altura de sua div maior e permite que alinhe verticalmente as divs menores com a propriedade vertical-align.

 

Pelo que eu entendi você queria fazer o contrário do link que o willian postou http://wbruno.com.br/scripts/comFauxColumns.html. Na teoria acho que é isso que você quer. usando o vertical align.

[Vládia Queiroz 0]

Oi Vládia,

 

Seguindo a idéia básica de alinhar a div do meio na base, aconselho a trocar teu "float left" por "inline-block". A propriedade inline-block determina que suas divs sejam criadas na mesma linha (similar ao float left). Essa linha recebe a altura de sua div maior e permite que alinhe verticalmente as divs menores com a propriedade vertical-align.

 

Pelo que eu entendi você queria fazer o contrário do link que o willian postou http://wbruno.com.br/scripts/comFauxColumns.html. Na teoria acho que é isso que você quer. usando o vertical align.

 

Isso mesmo No Rain, é isso que quero

 

o que você sugere é algo assim:

 

<div style="inline-block; margin-left:0px">imagem</div>

<div style="inline-block; margin-left:300px">imagem</div>

<div style="inline-block; margin-left: 100px">imagem</div>

<div style="clear:both">

</div>

 

e onde e como especifico a altura? vale lembrar que as duas colunas da esquerda e da direita têm a mesma altura, o problema está na central.

 

agora, eu acabei de testar o inline-block dessa forma que coloquei aí em cima e o que aconteceu foi que cada imagem ficou em uma linha diferente. então acho que entendi errado o que você falou.

 

pode colocar aqui o código do seu exemplo?

 

obrigada

[Vládia Queiroz 0]

William, o margin-top funcionou perfeitamente. valeu, obrigada

mas eu não criei aquela historia do conteiner porque não entendi direito como funciona e como criar, então fui testando a altura do objeto até conseguir alinha-lo, isso signifca que quando colocar o objeto central da página terei que ajustar de novo?

 

pode me explicar qual a diferença entre o margin-top e o "position:absolute; bottom:0"?

 

mais uma vez obrigada

[No Rain 0]

Você podia dar uma olhada no código fonte para ver o css que utilizei. vou tentar resumir cada propriedade do css desse código fonte

 

<div style=" display:inline-block; margin-left:0px; width:200px; height:500px; background-color: #999; zoom:1; *display:inline"> imagem </div>
<!-- inline-block - permite que sua div continue na mesma linha das divs adjacentes -->
<!-- height:500px - aqui você delimita a altura da sua div -->
<!-- zoom:1; *display:inline - hack para reproduzir o inline-block no ie7. -->


<div style="display:inline-block; vertical-align:bottom; margin-left:80px; width:200px; height:200px; background-color:#999; zoom:1; *display:inline"> imagem </div>
<!-- vertical-align:bottom - alinha esta div de acordo com a altura máxima da linha/bloco -->


<div style="display:inline-block; margin-left: 100px; width:200px; height:500px; background-color:#999; zoom:1; *display:inline"> imagem </div>

[Vládia Queiroz 0]

No Rain,

 

Esse código funciona só no IE 7?

Ou o hack não afeta a visualização nos outros navegadores?

 

gostei do código, pelo que entendi isso gera um bloco de informação, ou seja, mesmo que eu coloque outro elemento na página não vai alterar a posição de uma imagem em relação à outra. ou estou enganada?

 

obrigada

[No Rain 0]

o código funciona para todos os navegadores que não o ie7. o hack é para funcionar também no ie7.

 

Todo o conteudo que você colocar dentro dessas divs continuarão com o alinhamento dado a essas divs.

[Vládia Queiroz 0]

Eu queria agradecer a todos vocês, sinceramente.

Estou com outros tópicos abertos, se alguém puder dar uma força...

 

obrigada, mais uma vez