por Diego Eis
Janeiro 24th, 2006
Muita gente vem me perguntando como se transforma um layout fixo em um layout fluido. Dependendo de como você criou sua estrutura HTML, isso pode se tornar uma dor de cabeça. Mas, você pode criar uma estrutura HTML que seja simples e ao mesmo tempo lhe de a flexibilidade de se transformar um layout fixo em fluido mudando apenas 1 linha de CSS. Nesse video tutorial, você vai conferir como isso é feito.
Duração: ~ 7m54
Tamanho: ~7Mb
Formato: SWF
Assistir agora ou baixe o vídeo.
Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.
Se ainda estiver interessado, leia também:
Este post foi criado
na Terça-feira, Janeiro 24th, 2006 às 08:00 e está arquivado em Geral, Vídeos Tutoriais.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
Muito bom… Bem simplificado mesmo…
Pra quem não sabe, com certeza vai ajudar muito!
Muiiiiiiiiiito bom, parabéns cara, aprendi finalmente a transformar meu layout em fluido, alem de pegar outro macete na hora de centralizar, acho que eu usava um método meio arcaico, mas no mais o video ficou muito bom, parabéns Diego Eis.
gostei muito .
tenho uma dúvida quanto a tipos de fonte.
no site “http://www.lealea.net/”
a frase “Be seen, be heard, be read.” esta escrita com uma fonte diferente das tradicionais “Arial, Verdana, Georgia”, como ela fez isto?
Não seria melhor colocar no div #meio float:left ao invés margin??
Putz, gostei do video tutorial, ja aprendi algo mais, por que como Junio Vitorino eu tbm centralizava de uma maneira diferente, desse jeito é bem mais simples!
Opa!
Muito bom tutorial!
vai ajudar bastante gente.
Parabéns!
Abraços e continuem com o ótimo trabalho!
Para quem quiser restringir a largura mínima do conteúdo, pode utilizar o css abaixo:
#geral { min-width: 770px; }
Para o IE você pode usar “expression” ou utilizar um dos hacks CSS para emular o min-width.
#geral { width: expression(document.body.clientWidth > 770? “auto” : “770px” ); }
Se você quiser um CSS válido, utilize IE Conditional Comments.
Não testei os códigos acima, mas devem funcionar! 
Abraços!
Hum… não sabia que dava pra centralizar com Margin, e tambem não consegui :/
quero dizer, o código funcionou apenas no Mozila, no IE 6.0 não….
coloque o exemplo no ar
Diego, parabéns! Dicas com essa tiram várias dúvidas de quem ta começando. Tava até pensando em fazer algum tutorial sobre isso, mas você mandou bem!
Cara, muito bom.
Continue assim!
Simples e eficiente…
parabens!
Ótima aula, Diego, congratulações. 
Que bom que voltaram a fazer as webaulas, isso ajuda paka, tanto para os que estáo inciando quanto para os que já estão mais avançado.
Um abraço e que continuem assim.
Muito bom o tutorial, explica direitinho como fazer. As coisas so ficam um pouco mais complicadas se voce utilizar imagens pra background. =D
Mas a aula eh muito boa.
Otimo tutorial, porém comigo só funcionou no firefox, no ie 6.0 não funcinou, a div do meio expande pros lados depois que acaba as divs da direita e esquerda.
malz, expliquei errado, a div do meio não vai para baixo div da esquerda e direita. Porém quando as 2 divs (direita,esquerda) acabam, o texto da div do meio se espalha um pouco. Deem uma olhada http://thiagoaos.host.sk/tutorial6.html , esse ai ta com o width da geral comentado.
[…] Para quem está aprendendo recomendo os dois vídeos publicados pelo Diego Eis no tableless: Video Tutorial #6 - Transformando Layout Fixo em Fluído; […]
Faaala Eis!!!! A PAZ, cara!!!!
Veltei a ler vocês!!! E Agora como desenvolvedor WEB!!!!!! 
Legal isso ai cara!!!!! não conhecia o termo fluído!!!
Valew!
Emiliano
Muito bom, agora só gostaria de saber como faz para que as divs da esq. e da dir. fiquem do mesmo tamanho da div do meio, qualquer que seja seu tamanho
Parabéns pelo tutorial … foi de grande ajuda para mim.
Continue ajundando a todos.
Valeu !!
[…] a pena conferir. No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTMLallowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> […]
O ruim é código de exemplo que você usou, nada semântico…
Agora vai uma dúvida que a muito tempo não consegui solucionar… tem como fazer o layout ser fluído verticalmente? ou seja, o rodapé encostado no final da janela?
[…] de como transformamos um layout Fixo e Fluido Video de como transformar um layout de largura fixa como o da Visie em um layout fluido com o do Submarino mudando apenas 1 linha de […]
Cara.. humilho aih em .valeu pelo aprendizado que vc me proporcionou….ajudou muito
Vlw Cara!
estou começando em css e não fazia idéia de como fazer isso… ainda mais um layout fluido!
=D
Seu site está nos meus favoritos e acompanharei o seu feed!
Abraços.
Estou precisando aprender CSS para aplicar em um cliente (o primeiro na Web) e o seu material é muito bom! Você usa uma didática fácil e que qualquer um, até um novato em CSS como eu, consegue entender.
É como dizem por aí: “Você é o cara !!!”
Parabéns!!!
Olá!
primeiramente parabéns pelo site e por mais esse tutorial muito bem feito.
Porém tenho uma dúvida e um desafio, hehe.
estou utilizando esse exemplo como base:
CSS:
#topo,#rodape {width:100%; height:70px; background:#ccc; clear:both}
#left {float:left; width:150px; background-color:#00FFFF}
#right {float:right; width:150px; background-color:#ffcc00}
#center {margin:0 160px}
#a
{
width: 800px;
border:1px #ffcc00 solid
}
html>body #a
{
width: auto;
min-width:800px;
border:1px #ff0000 solid
}
HTML:
sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf
sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf
sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf
—-
O problema é o seguinte, determinei uma largura mínima para o site, e em IE7 e FIREFOX ele funciona perfeitamente.
Agora, como eu consigo fazer com que o IE6 “breque” quando chegar na largura mínima.
Já tentei de tudo e não consigo de jeito nenhum, inclusive expressões, como a: width:expression(document.body.currentStyle.offsetWidth > 810 ? “auto” : “800px”, mas ele não respeita!
Você ou alguém conhece a soulução para esse dilema?
Obrigado!
Cara… legal sua video aula hein!
Facinho de entender! sussa!
Parabens!
Foi útil em para uma luz de um problema cabuloso q eu tinha aki!!
VALEU!
Cara vc é muito fera…
vlw mesmo o mundo precisa realmente de caras como vc que compartilha as coisas e que sabe ensinar….
Obrigado mesmo.
Parabéns,
Um bom trabalho.
[…] trabalho pela comunidade do Tableless. Nestes últimos dias, colocou no ar 2 tutoriais falando de como transformar layout fixo em fluido, e um outro sobre como centralizar um layout horizontalmente. Para quem ainda tem dúvidas, vale a […]