Duvida Com Div (resolvido)

[RodrigoGomes]

olá pessoal.. eu estou com uma dúvida cruel.. o.o

já faz três dias que tento resolver de todas as formas..

eu queria por 3 div uma na esquerda, outra na direita, e outra no centro..

ex:

quando o conteudo de uma das div expandisse sua altura, as outras duas também iria expandir..

e a div do centro teria uma largura indefinida (se expande de acordo com o tamanho do monitor).. as da direita e esquerda teria uma largura fixa..

eu tentei da seguinte forma, mas não deu nada certo:

html

<div id="CT">
<div id="CT1">
<div id="CT2">
<div id="CT3">
</div>
</div>
</div>
</div>

css

#CT {
    clear:both;
    background:#000000;
    width:100%;
    min-width: 1000px
    }
#CT1 {
    clear:both;
    background:transparent url(../color_fix/menu.png) top left repeat-y;
    width:100%;
    min-width:195px
    }
#CT2 {
    clear:both;
    background:transparent;
    width:100%;
    }
#CT3 {
    clear:both;
    background:transparent url(../color_fix/menu1.1.png) top right repeat-y;
    width:100%;
    min-width:180px
    }

se alguém souber o que devo fazer ou tiver alguma dica posta ai.. =)

Editado Novembro 15, 2007 por Vampyro

[KaKarotto]

É, não é uma coisa fácil de solucionar.

Isso porque não há uma forma de fazer isso sem transgredir as normas da w3c e isso invalida seu html ou xhtml.

Mas se você não está muito preocupado com validar o site ou não, então você pode fazer o seguinte:

Tira o doctype do começo do seu html.

Faça as 3 caixas assim:

Html

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

Css

#esquerda{
width:150px; height:100%;
border:1px solid blue;
float:left;
}

#central{
width:400px; height:100%;
border:1px solid blue;
float:left;
}

#direita{
width:150px; height:100%;
border:1px solid blue;
float:left;
}

A mágica é fazer o height funcionar em porcentagem, mas eu não sei por que até hj a porcentagem não funciona com o uso do doctype no começo do html. É estranho...muito estranho....

O meu conselho é, valide sua página, faça sem esse artifício que eu te passei, faça com que os divs da esquerda e da direita tenham uma quantidade de conteúdo e não se preocupe se o site se expandir demais com o div central em relação com os outros divs.

Geralmente os sites são assim, você pode ver que quando o site tem o layout de tres colunas, o div do meio geralmente fica maior em relação aos outros divs laterais.

belezz?

Kelabrassss

[RodrigoGomes]

beleza... :lol:

é o site vai ter que ser válido pelo w3c, e a estrutura do site vai ter que ser igual ao do desenho.. mais eu estou fazendo tudo primeiro para depois acertar os erros..

depois de pensar em várias tentativas, uma deu certo..

html

<div id="CT"><div id="CT1"><div id="CT2"><div id="CT3"><div id="CT4">
<!--MENU1-->

</div><div id="CT5">
<!--CENTRO-->

</div><div id="CT6">
<!--MENU2-->

</div></div></div></div></div>

css

#CT {
    clear:both;
    background:#000000;
    width:100%;
    min-width: 1000px;
    }
#CT1 {
    float:left;
    background:transparent url(../color_fix/menu.png) top left repeat-y;
    width:100%;
    }
#CT2 {
    float:left;
    background:transparent;
    width:100%;
    }
#CT3 {
    float:left;
    background:transparent url(../color_fix/menu1.1.png) top right repeat-y;
    width:100%;
    }
#CT4 {
    float:left;
    background:transparent;
    width:195px;
    }
#CT5 {
    float:left;
    background:transparent;
    min-width:624px;
    }
#CT6 {
    float:right;
    background:transparent;
    width:180px;
    }

esta funcionando corretamente.. vlw.. ;)

Editado Novembro 15, 2007 por Vampyro

[KaKarotto]

Opa,

Cara, confesso que não entendi o que fez....

Não entendi por que tantos divs, e aqui em casa não funcionou isso ae não :huh:

você disse que queria que os 3 se expandisse caso um se expandisse...mas como? se seu conteudo central tem tamanho variavel e as colunas tem tamanho fixo???? :huh:

No seu último código não tem também nenhuma menção do atributo height :h: ....Ué.....Como solucionou o problema da altura só com o atributo width e min-width !?!?!?!??!?!

você também falou que o conteúdo teria o tamanho do navegador...cara isso só é possível se mexer em porcentagem, o Height...

você não está confundindo largura com altura não ? Largura é Width, Altura é Height.

Esse assunto foi discutido em vários fóruns, inclusive no do tableless...sinto muito cara, mas essa sua solução ae eu não entendi mesmo. Das duas uma, ou não entendi o que queria realmente ou estás enganado quanto a solução do problema.

Kelabrassss

Editado Novembro 15, 2007 por KaKarotto

[RodrigoGomes]

é.. é.. foi uma solução bem complicada de entender..

mais deu certo.. ao menos aqui no layout..

é que os três divs iniciais possuem uma background..

usando o min o div vai esticar corretamente, porem caso a tela do user for pequena.. ele não vai comprimir por inteiro..

e o motivo de tantas divs é que as primeiras são as que contem os backgrounds e as outras são para colocar o conteúdo.. ou sejá.. após colocar mais.. e mais conteudos.. os 3 backgrounds (do fundo) de cada div esticarão todos de uma só vez.. xD

isso é quase um labirinto para entender.. rss

mais como estou acostumado com labirintos assim em php, as vezes temos que fazer muitas gambiarras para algo funcionar.. mais se pensar bem, isso não é bem uma gambiarra, esta correto fazer o que fiz.. é só um pouco complicado de entender..