---
title: Layout Fixo / Fluido de 3 colunas em 8 Minutos
authors: Diego Eis
type: post
date: 2008-06-10
url: /layout-fixo-fluido-de-3-colunas-em-8-minutos/
aktt_notify_twitter:
  - no
tweetbackscheck:
  - 1356388653
shorturls:
  - 'a:3:{s:9:"permalink";s:68:"https://tableless.com.br/layout-fixo-fluido-de-3-colunas-em-8-minutos";s:7:"tinyurl";s:26:"https://tinyurl.com/3p9a9h4";s:4:"isgd";s:19:"https://is.gd/7b2XNa";}'
twittercomments:
  - 'a:12:{i:9948339156029440;s:7:"retweet";i:9898013027737600;s:7:"retweet";i:46309164930183168;s:7:"retweet";i:46308049937383424;s:7:"retweet";i:46307772807131136;s:7:"retweet";i:46291797089058816;s:7:"retweet";i:46276549661556736;s:7:"retweet";i:46276273185624064;s:7:"retweet";i:46276147134201857;s:7:"retweet";i:46274651185352706;s:7:"retweet";i:50379513451909121;s:6:"137326";i:50660352467288064;s:6:"137351";}'
tweetcount:
  - 22
dsq_thread_id: 503038234
categories:
  - CSS
  - HTML
  - Técnicas e Práticas
  - Tecnologia e Tendências
  - Vídeos Tutoriais
tags:
  - CSS
  - tableless
  - Vídeos Tutoriais
  - xhtml

---
Na verdade a gravação foi feita em 7 minutos e 51 segundos.
  
Neste vídeo mostro como faço para criar um layout básico de 3 colunas. Esta técnica tem um diferencial: retirando apenas uma linha do CSS, o layout passa de fixo, para fluido (como o layout do submarino ou americanas). Isso dá várias possibilidades de layout para o designer e poupa muito trabalho da equipe ao redesenhar e modificar o layout.

<iframe src="https://player.vimeo.com/video/1148661" width="640" height="401" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  
[Link direto para o vídeo Layout fixo/fluido de 3 colunas em 8 minutos][2].

Novamente o vídeo está sem áudio por motivos de falta de tempo. 😀
  
Sem áudio não preciso fica me preocupando com a explicação, só digito, gravo e pronto.

[update] Muitas perguntaram porque não pode-se usar na prática, os id&#8217;s que eu utilizei no vídeo. Já escrevi sobre isso aqui: [Sobre nome e sobrenomes][3].

Se você quiser mais vídeos e em alta-resolução, visite o [Campus Online][4]. Lá você vai encontrar [vídeos tutoriais de Tableless, Ajax, Javascript][5] e boas práticas de desenvolvimento web.

 [1]: https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2008/06/3colunas-oitominutos.html
 [2]: https://www.vimeo.com/1148661?pg=embed&sec=1148661
 [3]: https://tableless.com.br/sobre-nomes-e-sobrenomes