{"id":1707,"date":"2010-12-22T14:39:58","date_gmt":"2010-12-22T16:39:58","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=1707"},"modified":"2011-03-11T20:48:00","modified_gmt":"2011-03-11T22:48:00","slug":"como-criar-um-layout-de-3-colunas-com-css","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css","title":{"rendered":"Como criar um layout de 3 colunas com CSS"},"content":{"rendered":"<figure id=\"attachment_1756\" aria-describedby=\"caption-attachment-1756\" style=\"width: 550px\" class=\"wp-caption alignleft caption\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/12\/layout-css-3-colunas.png\" alt=\"Layout CSS com 3 colunas\" title=\"Layout CSS com 3 colunas\" width=\"550\" height=\"219\" class=\"size-full wp-image-1756\" style=\"border:none;\"\/><figcaption id=\"caption-attachment-1756\" class=\"wp-caption-text\">Tutorial demonstrando como criar um Layout CSS com 3 colunas.<\/figcaption><\/figure>\n<p>Existem dois tipos principais de <strong>layouts com CSS<\/strong>: largura fixa e de largura vari\u00e1vel (conhecido tamb\u00e9m como, layout <strong>l\u00edquido ou layout fluido<\/strong>), esse \u00faltimo o site se ajusta ao tamanho da janela do navegador do usu\u00e1rio. Outra coisa que se pode fazer \u00e9 deixar a coluna do conte\u00fado como uma largura vari\u00e1vel e as colunas ao lado fixa. Nesse artigo vou mostrar como criar um <strong>layout fixo de 3 colunas<\/strong>.<br \/>\n<!--more Continuar lendo...--><br \/>\nUm usu\u00e1rio com uma resolu\u00e7\u00e3o menor do que a largura do layout ver\u00e1 uma barra de rolagem na horizontal do seu navegador. Se a resolu\u00e7\u00e3o do monitor for maior que a largura definida no layout aparecer\u00e1 espa\u00e7os vazios na tela. Neste caso \u00e9 interessante que o desenvolvedor <a href=\"https:\/\/www.kadunew.com\/blog\/css\/centralizando-layout-com-css-%e2%80%93-parte-i\" title=\"Centralizando layout com CSS \u2013 parte II\">centralize o layout<\/a>, para os espa\u00e7os vazios aparecerem nos dois lados do site.<\/p>\n<p>Vale lembrar tamb\u00e9m que, usando CSS para formatar as suas p\u00e1ginas, no lugar de tabelas, fica muito mais pr\u00e1tico para alterar o layout do seu site, alteramos apenas pelo arquivo CSS, al\u00e9m disso, seu site ir\u00e1 carregar mais r\u00e1pido.<\/p>\n<p>Layout de tr\u00eas colunas \u00e9 muito comum, j\u00e1 que permite deixar a navega\u00e7\u00e3o \u00e0 esquerda, o conte\u00fado no meio, e a publicidade, links, logos&#8230; \u00e0 direita.<\/p>\n<h2>Estrutura do HTML para tr\u00eas colunas<\/h2>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;geral&quot;&gt;\r\n    &lt;div id=&quot;cabecalho&quot;&gt;&lt;\/div&gt;\r\n    &lt;div id=&quot;principal&quot;&gt;\r\n        &lt;div id=&quot;conteudo-1&quot;&gt;&lt;\/div&gt;\r\n        &lt;div id=&quot;conteudo-2&quot;&gt;\r\n            &lt;div id=&quot;conteudo-2-1&quot;&gt;&lt;\/div&gt;\r\n            &lt;div id=&quot;conteudo-2-2&quot;&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div id=&quot;rodape&quot;&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Acima temos a marca\u00e7\u00e3o necess\u00e1ria para a cria\u00e7\u00e3o das tr\u00eas colunas. Repare que criamos uma div chamada de <strong>conteudo-2<\/strong> que serve como um box para englobar as divs <strong>conteudo-2-1<\/strong> e <strong>conteudo-2-2<\/strong>. A seguir detalhes da <a href=\"https:\/\/www.kadunew.com\/blog\/xhtml\/estrutura-minima-de-um-documento-xhtml\" title=\"Estrutura m\u00ednima de um documento (X)HTML\">estrutura HTML<\/a> usada.<\/p>\n<div class=\"obs\">\n<ul>\n<li><strong>#geral<\/strong>: um elemento usado para controlar principalmente a largura total do nosso layout;<\/li>\n<li><strong>#cabecalho<\/strong>: N\u00e3o \u00e9 realmente parte do layout de 3 colunas, mas inclu\u00eddos aqui para fazer um layout completo;<\/li>\n<li><strong>#principal<\/strong>: O elemento que cont\u00e9m o conte\u00fado que ser\u00e1 exibido nas colunas. Nesse exemplo n\u00e3o vamos estilizar esse elemento, por\u00e9m sempre \u00e9 de boa pratica criar um box para o conte\u00fado do site. Caso mais adiante voc\u00ea desejar aplicar um estilo mais avan\u00e7ado ou com uma <a href=\"https:\/\/www.kadunew.com\/blog\/css\/entendendo-a-especificidade-css\" title=\"Entendendo a especificidade CSS\">especificidade CSS<\/a> maior com certeza ser\u00e1 \u00fatil;<\/li>\n<li><strong>#conteudo-1<\/strong>: O elemento que se tornar\u00e1 a coluna da esquerda. Isto ser\u00e1 muitas vezes um submenu;<\/li>\n<li><strong>#conteudo-2<\/strong>: Coluna da a direita, dentro dela ficar\u00e1 mais duas divs(<strong>#conteudo-2-1<\/strong> e <strong>#conteudo-2-2<\/strong>);<\/li>\n<li><strong>#conteudo-2-1<\/strong>: O elemento que ser\u00e1 a coluna do meio. O conte\u00fado principal normalmente vai aqui.<\/li>\n<li><strong>#conteudo-2-2<\/strong>: Este elemento ser\u00e1 a coluna da direita, usada frequentemente como um &#8220;sidebar&#8221; ou uma coluna auxiliar.<\/li>\n<li><strong>#rodape<\/strong>: Como o  cabe\u00e7alho, isso n\u00e3o faz parte do layout das colunas, mas inclu\u00edmos em prol da integridade.<\/li>\n<\/ul>\n<\/div>\n<h2>Resultado da nossa marca\u00e7\u00e3o HTML<\/h2>\n<p>Agora d\u00ea uma olhada em como o navegador renderiza o documento sem estilos, apenas com nossa marca\u00e7\u00e3o HTML. Para facilitar a visualiza\u00e7\u00e3o inseri um pouco de conte\u00fado dentro das colunas.<\/p>\n<div class=\"obs\">\n<a href=\"https:\/\/www.kadunew.com\/blog\/exemplos\/marcacao-html.html\" target=\"_blank\">Exemplo da marca\u00e7\u00e3o HTML<\/a>.\n<\/div>\n<h2>Definindo a largura e cores de fundo das colunas<\/h2>\n<p>Agora vamos adicionar um pouco de CSS b\u00e1sico para tornar mais f\u00e1cil o entendimento do que estamos fazendo. A seguir deixamos uma largura fixa igual a 960px e <a href=\"https:\/\/www.kadunew.com\/blog\/css\/centralizando-layout-com-css-%E2%80%93-parte-i\" title=\"Centralizando layout com CSS\">centralizamos horizontalmente o layout<\/a>. Coloquei tamb\u00e9m algumas cores de fundo para facilitar a montagem do layout com 3 colunas.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nbody {\r\n    margin:0;\r\n    padding:0;\r\n    color:#000;\r\n    background:#fff;\r\n}\r\n#geral {\r\n    width:960px;\r\n    margin:0 auto;\r\n    background:#ddd;\r\n}\r\n#cabecalho {\r\n    background:#fdd;\r\n}\r\n# conteudo-1 {\r\n    background:#bfb;\r\n}\r\n#conteudo-2-1 {\r\n    background:#ddf;\r\n}\r\n#conteudo-2-2 {\r\n    background:#dff;\r\n}\r\n#rodape {\r\n    background:#ff9;\r\n}\r\n<\/pre>\n<p>Veja como ficou nosso layout depois de definir a largura da div <strong>#geral<\/strong>. Todos os elementos s\u00e3o empilhados verticalmente em uma \u00fanica coluna.<\/p>\n<div class=\"obs\">\n<a href=\"https:\/\/www.kadunew.com\/blog\/exemplos\/largura-e-cores.html\" target=\"_blank\" title=\"Definindo a largura e cores de fundo das colunas\">Largura total do layout mais cor de fundo<\/a>.\n<\/div>\n<h2>Criando as duas primeiras colunas<\/h2>\n<p>Para come\u00e7ar a criar as colunas, vamos definir a largura das divs <strong>#conteudo-1<\/strong> e <strong>#conteudo-2<\/strong>  e flutu\u00e1-las em dire\u00e7\u00f5es opostas, ou seja, uma para esquerda e outra para a direita.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#conteudo-1 {\r\n    float:left;\r\n    width:240px;\r\n    background:#bfb;\r\n}\r\n#conteudo-2 {\r\n    float:right;\r\n    width:720px;\r\n}\r\n<\/pre>\n<p>Veja como est\u00e1 funcionando nosso layout de 3 colunas.<br \/>\nO rodap\u00e9  parece estranho, nesta fase, mas isso ser\u00e1 corrigido mais tarde.<\/p>\n<div class=\"obs\">\n<a href=\"https:\/\/www.kadunew.com\/blog\/exemplos\/duas-primeiras-colunas.html\" target=\"_blank\" title=\"Criando as duas primeiras colunas\">Coluna #conteudo-1 e #conteudo-2 lado a lado<\/a>.\n<\/div>\n<h2>Deixando as colunas lado a lado<\/h2>\n<p>Para deixar os elementos <strong>#conteudo-2-1<\/strong> e <strong>#conteudo-2-2<\/strong>  em colunas, tudo o que precisamos fazer \u00e9 repetir o que fizemos antes, ou seja, dar as larguras aos elementos utilizando <code>float<\/code> em dire\u00e7\u00f5es opostas, veja o c\u00f3digo abaixo.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#conteudo-2-1 {\r\n    float:left;\r\n    width:480px;\r\n    background:#ddf;\r\n}\r\n#conteudo-2-2 {\r\n    float:right;\r\n    width:240px;\r\n    background:#dff;\r\n}\r\n<\/pre>\n<p>Temos agora as tr\u00eas colunas que quer\u00edamos, <strong>#conteudo-1<\/strong> para a esquerda, <strong>#conteudo-2-1<\/strong> no meio, e <strong>#conteudo-2-2<\/strong> para a direita.<\/p>\n<div class=\"obs\">\n<a href=\"https:\/\/www.kadunew.com\/blog\/exemplos\/colunas-lado-a-lado.html\" target=\"_blank\" title=\"Deixando as colunas lado a lado\">Colunas lado a lado<\/a>.\n<\/div>\n<h2>Arrumando o rodap\u00e9, colocando o rodap\u00e9 no seu lugar<\/h2>\n<p>A div do  <strong>#rodape<\/strong> \u00e9 exibida atualmente abaixo do <strong>#conteudo-1<\/strong> , que n\u00e3o \u00e9 onde queremos que fique. Existem diferentes formas de empurr\u00e1-la abaixo das tr\u00eas colunas, mas a maneira mais simples \u00e9 usar <code>clear: both<\/code>.<\/p>\n<p>Essa propriedade do CSS diz que n\u00e3o podemos ter elementos flutuando a esquerda e nem a direita desse elemento, no caso a div <strong>#rodape<\/strong>.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#rodape {\r\n    clear:both;\/*posicionando o rodape abaixo das outras divs*\/\r\n    background:#ff9;\r\n}\r\n<\/pre>\n<div class=\"obs\">\n<a href=\"https:\/\/www.kadunew.com\/blog\/exemplos\/arrumando-rodape.html\" target=\"_blank\" title=\"Arrumando o rodap\u00e9\">Arrumando o Rodape<\/a>.\n<\/div>\n<h2>Organizando os elementos do layout<\/h2>\n<p>Para tornar a p\u00e1gina de demonstra\u00e7\u00e3o final melhor de ser visualizada vamos dar uns espa\u00e7amentos utilizando a propriedade <code>padding<\/code> do CSS. Veja como ficou a folha de estilos. Aten\u00e7\u00e3o para as modifica\u00e7\u00f5es feitas na largura (propriedade width:) das divs <strong>#conteudo-1<\/strong> e <strong>#conteudo-2-2<\/strong>. Diminu\u00edmos a largura porque colocamos um espa\u00e7amento, caso n\u00e3o tiv\u00e9ssemos diminu\u00eddo a largura desses elementos o layout &#8220;quebraria&#8221; (as colunas n\u00e3o ficariam uma ao lado da outra). Uma outra solu\u00e7\u00e3o seria aumentar a largura da div <strong>#geral<\/strong>.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#cabecalho {\r\n    padding:10px;\r\n    background:#fdd;\r\n}\r\n# conteudo-1 {\r\n    float:left;\r\n     \/* diminuimos a largura para n\u00e3o quebrar o layout. \r\n      * valor antigo 220\r\n      *\/\r\n    width:210px;\r\n    padding:10px;\r\n    background:#bfb;\r\n}\r\n#conteudo-2-1 {\r\n    float:left;\r\n    width:460px;\r\n    padding:10px;\r\n    background:#ddf;\r\n}\r\n#conteudo-2-2 {\r\n    float:right;\r\n    \/*diminuimos a largura para n\u00e3o quebrar o layout\r\n    * valor antigo 220\r\n    *\/\r\n    width:200px;\r\n    padding:10px;\r\n    background:#dff;\r\n}\r\n#rodape {\r\n    clear:both;\r\n    padding:10px;\r\n    background:#ff9;\r\n}\r\n<\/pre>\n<p>Confira o resultado final do layout com 3 colunas.<\/p>\n<div class=\"obs\">\n<a href=\"https:\/\/www.kadunew.com\/blog\/exemplos\/resultado-final.html\" target=\"_blank\" title=\"Layout final\">Resultado final. Layout CSS 3 colunas<\/a>.\n<\/div>\n<p>Fique por dentro de todas atualiza\u00e7\u00f5es aqui do site: Twitter: <a href=\"http:\/\/twitter.com\/kadunew\" rel=\"nofollow\">@kadunew<\/a><br \/>\nAbra\u00e7o e at\u00e9 a pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Existem dois tipos principais de layouts com CSS: largura fixa e de largura vari\u00e1vel (conhecido tamb\u00e9m como, layout l\u00edquido ou layout fluido), esse \u00faltimo o site se ajusta ao tamanho da janela do navegador do usu\u00e1rio. Outra coisa que se pode fazer \u00e9 deixar a coluna do conte\u00fado como uma largura vari\u00e1vel e as colunas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[45,55],"class_list":["post-1707","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como criar um layout de 3 colunas com CSS<\/title>\n<meta name=\"description\" content=\"Artigo que explica t\u00e9cnicas fundamentais para cria\u00e7\u00e3o de um layout CSS com 3 colunas. Acompanhe passo a passo a cria\u00e7\u00e3o do layout.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como criar um layout de 3 colunas com CSS\" \/>\n<meta property=\"og:description\" content=\"Artigo que explica t\u00e9cnicas fundamentais para cria\u00e7\u00e3o de um layout CSS com 3 colunas. Acompanhe passo a passo a cria\u00e7\u00e3o do layout.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2010-12-22T16:39:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-03-11T22:48:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/12\/layout-css-3-colunas.png\" \/>\n\t<meta property=\"og:image:width\" content=\"555\" \/>\n\t<meta property=\"og:image:height\" content=\"219\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css\",\"url\":\"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css\",\"name\":\"Como criar um layout de 3 colunas com CSS\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/12\/layout-css-3-colunas.png\",\"datePublished\":\"2010-12-22T16:39:58+00:00\",\"dateModified\":\"2011-03-11T22:48:00+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Artigo que explica t\u00e9cnicas fundamentais para cria\u00e7\u00e3o de um layout CSS com 3 colunas. Acompanhe passo a passo a cria\u00e7\u00e3o do layout.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/12\/layout-css-3-colunas.png\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/12\/layout-css-3-colunas.png\",\"width\":\"555\",\"height\":\"219\",\"caption\":\"Layout CSS com 3 colunas\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/css\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como criar um layout de 3 colunas com CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como criar um layout de 3 colunas com CSS","description":"Artigo que explica t\u00e9cnicas fundamentais para cria\u00e7\u00e3o de um layout CSS com 3 colunas. Acompanhe passo a passo a cria\u00e7\u00e3o do layout.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css","og_locale":"pt_BR","og_type":"article","og_title":"Como criar um layout de 3 colunas com CSS","og_description":"Artigo que explica t\u00e9cnicas fundamentais para cria\u00e7\u00e3o de um layout CSS com 3 colunas. Acompanhe passo a passo a cria\u00e7\u00e3o do layout.","og_url":"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css","og_site_name":"KADUNEW","article_published_time":"2010-12-22T16:39:58+00:00","article_modified_time":"2011-03-11T22:48:00+00:00","og_image":[{"width":555,"height":219,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/12\/layout-css-3-colunas.png","type":"image\/png"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css","url":"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css","name":"Como criar um layout de 3 colunas com CSS","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/12\/layout-css-3-colunas.png","datePublished":"2010-12-22T16:39:58+00:00","dateModified":"2011-03-11T22:48:00+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Artigo que explica t\u00e9cnicas fundamentais para cria\u00e7\u00e3o de um layout CSS com 3 colunas. Acompanhe passo a passo a cria\u00e7\u00e3o do layout.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/12\/layout-css-3-colunas.png","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/12\/layout-css-3-colunas.png","width":"555","height":"219","caption":"Layout CSS com 3 colunas"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/css\/como-criar-um-layout-de-3-colunas-com-css#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.kadunew.com\/blog\/category\/css"},{"@type":"ListItem","position":3,"name":"Como criar um layout de 3 colunas com CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/1707"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=1707"}],"version-history":[{"count":53,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/1707\/revisions"}],"predecessor-version":[{"id":2107,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/1707\/revisions\/2107"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=1707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=1707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=1707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}