Div height CSS

candycane

Power Member
Ola comunidade! :)

Eu tenho 3 divs (#esq, #meio, #dir), as 2 primeiras têm float:left e a 3º float:right.
a 1º e a 3º div têm uma imagem de fundo que eu quero k se repita y.

Só que estou com um problema... como é que eu faço com que a imagem de fundo da 1º e 3º div se repita ao longo de y consoante o tamanho da 2ºdiv?


CSS:
Código:
#main {
 width: 860px; 
 margin-left:auto;
 margin-right:auto;
 
}
#esq {
 background-image: url(imagens/esq.jpg);
 background-repeat: repeat-y;
 width: 30px; 
 float: left;
 overflow: auto;
}
#meio {
 float: left;
 width: 800px;
 background-color: #FFFFFF;
 overflow: auto;
}
#dir {
 float: right;
 width: 30px;
 background-image: url(imagens/dir.jpg);
 background-position: 0 0;
 background-repeat: repeat-y;
}

HTML:
Código:
<div id="main">   
        <div id="esq"></div>
        <div id="meio"></div>
        <div id="dir"></div>    
</div>
 
Sem ter a certeza do que estou a dizer, experimenta por height: 100%; nas que queres q crescam.

Outra solução possível e' pores as divs umas dentro das outras, i.e. esquerda[meio[direita]].

Assim todas vao crescer para o tamanho da div da direita.

EDIT:

Mas a ideia disso e' pores um background a toda a altura?

Porque não aplicas o background directamente na #main?
 
Última edição:
Sem ter a certeza do que estou a dizer, experimenta por height: 100%; nas que queres q crescam.

Outra solução possível e' pores as divs umas dentro das outras, i.e. esquerda[meio[direita]].

Assim todas vao crescer para o tamanho da div da direita.

EDIT:

Mas a ideia disso e' pores um background a toda a altura?

Porque não aplicas o background directamente na #main?

eu tenho 2 imagens, uma pra esq e outra pra dir, no meio n tenho imagem nenhuma....
O que achei estranho foi da div main n crescer consoante a div meio, pk a div principal é a main :(
 
Uma solução é fazer uma imagem de fundo a toda a largura da página, divídida em 3, no lado esquerdo metes a imagem do div#esq, no meio a do div#meio e no lado direito a do div#direito, aplicas essa imagem ao fundo do body e repetição y e já faz o que queres
 
Apesar do display: table funcionar a melhor opção é colocar todas as DIVs como float, para serem automaticamente detectadas no interior da DIV main, quanto ao background, apos as DIVs estarem correctamente definidas ao definires a height das DIVs laterais como 100% já não vais ter problemas. sendo que esse valor passa a ser considerado pela #main e n pela página em si.

Cumps.
 
Back
Topo