[Resolvido] coluna elastica

[leandro_re9artes 3]

boa galera....!!

 

estou criando um layout em html e css e o problema é o seguinte.....

 

criei duas div em float:left dentro de uma div container a qual não pode ter height:100% pois se não, seu conteudo ultrapassa a margem de bottom..... a coluna(uma das div mensionadas) depende da altura da div pai que no caso é a container porem a esta depende do body e este depende da pagina "HTML".

sabendo que a body e html estão com style em heigth:100% mas a div containe não pode conter esta medida a coluna lateral (nome de umas das div em float) não assume que 100% de seu espaço é o limite do container pois este não tem height....

já pesquisei, tentei alguns comandos em css, e nada faz esta bendita se esticar sem conteudo.

o pior que é um layout em php e o script vai determinar o seu conteudo...não há como ficar aumentando manualmente o coluna de acordo com o conteudo da segunda div.

o mato sem cachorro!!!

qualquer sujestão é valida (java, css, php, html....)manda que eu pesquiso...um abraço.

[Giovani 104]

Não sei se é bem isso, mas você já tentou colocar um background na container - repetindo no eixo y - que fique exatamente no lugar dessa div?

[leandro_re9artes 3]

Giovani já tinha tentado isso, voltei e coloquei na div pai desta coluna e tambem não deu certo.... pensei em preencher o espaço com um css :after mais função content, porem não encontrei a codificação da linguagem que funcionasse.

minha ideia era preencher a div com uma div falsa que se reproduzisse atraves da função css after repetindo ela mesma no decorrer da div.

se voce ou alguem tiver uma ideia a partir disto!?

 

abração

[angelorubin 142]

Boa tarde,

 

Deixa-me ver se entendi, a marcação básica seria algo como abaixo:

 

XHTML

<div id="container">
    <div id="esquerda"></div>
    <div id="direita"></div>
</div>

 

Caso positivo, a partir dai o que você precisa fazer?

[leandro_re9artes 3]

angelo é isso o basico, dai temos o seguinte:

 

o container não pode receber altura em css para ser elastico e delimitar-se ao rodapé

 

a div da esqueda tem que acompanhar a div da direita para melhor estetica do trabalho... pelo motivo que a esquerda é do menu lateral com css radius (cantos arredondados)

 

<div id="container">

<div id="esquerda"></div>

<div id="direita"></div>

</div>

 

estou procurando algum esquema de pegar a altura automaticamente da div da direita e colocala em uma variavel ...ai eu consigo colocar este paramentro em um script css na propria pagina.

 

ajuda ai!!!

[angelorubin 142]

Creio que a técnica de faux column lhe resolva o problema.

 

Veja um exemplo aqui - Clique aqui

[leandro_re9artes 3]

angelo ... desculpe mas não consegui identificar neste tópico anexo a sua ideia.....repetir a imagem em background eu já tentei mas ainda sim o css busca referencia na div pai... e esta não pode ter height pois tem de se adaptar ao texto.

 

beleza

[leandro_re9artes 3]

angelo!!!!! é isso cara .... desculpa ai... fui pesquisar a fundo e encontrei outro topico aqui no imaster e verdadeiramente esplicou o segredo da faux column....

o segredo está em colocar o estilo overflow:hidden na container onde esta localizada as div que devem ter o mesmo tamanho e nas div o estilo "padding-bottom: 1000em" e "margin-bottom: -999.5em;".... essa configuração fara com que as colunas fiquem do mesmo tamanho .

 

#container{

width:400px;

overflow:hidden;

background-color:#000; /*Preto*/

}

 

#div1{

float:left;

background-color:#F00; /*Vermelho*/

padding-bottom: 1000em;

margin-bottom: -999.5em;

}

 

 

#div2{

float:left;

background-color:#00F; /*Azul*/

color:#FFF;

padding-bottom: 1000em;

margin-bottom: -999.5em;

}

 

 

acima está uma copia da resolução do problema do outro membro..... abaixo o link

 

http://forum.imasters.com.br/topic/412809-como-expandir-div-verticalmente/

 

brigadão abraço......

 

pode fechar.