{"id":92,"date":"2012-05-29T01:02:35","date_gmt":"2012-05-29T01:02:35","guid":{"rendered":"https:\/\/learnwebcode.com\/?p=92"},"modified":"2016-03-29T02:04:15","modified_gmt":"2016-03-29T02:04:15","slug":"two-column-css-layout-template","status":"publish","type":"post","link":"https:\/\/learnwebcode.com\/two-column-css-layout-template\/","title":{"rendered":"Two Column CSS Layout Template"},"content":{"rendered":"<p>One of the best ways to learn XHTML &#038; CSS is to simply jump into a fully functional layout and dissect the code.  It can be much more rewarding to edit and understand a complex layout than to learn from the ground up.  So to go along with my introductory lessons, I have created a Two Column CSS Layout Template:<\/p>\n<p>When you look at the source code you will find comments along the way that explain what certain elements are used for. The CSS file is also broken up into logical sections.<\/p>\n<ul>\n<li><a href=\"https:\/\/learnwebcode.com\/demos\/two-column-css-layout-template\/\">Live Demo of the Layout<\/a><\/li>\n<li><a href=\"https:\/\/learnwebcode.com\/downloads\/templates\/LearnWebCode.com-2-Column-CSS-Layout.zip\">Download the template files (.zip format)<\/a><\/li>\n<\/ul>\n<p><em>You are free to use\/alter this template for commercial, personal, or educational purposes.  However, please do <strong>not<\/strong> upload the original .zip file on another website.<\/em><\/p>\n<p>If you come across anything in the template that doesn\u2019t make sense please leave a comment; perhaps others are having the same problem and we can learn together through this post.<\/p>\n<p>I am also taking requests for additional templates you would like to see offered.<\/p>\n<p>If you would rather learn from a single, unified video course instead of individual one-off tutorials check out <a href=\"\/web-design-for-beginners-real-world-coding-html-css\/\">my updated 8 hour video course<\/a> and learn pro-level HTML, CSS, and responsive design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the best ways to learn XHTML &#038; CSS is to simply jump into a fully functional layout and dissect the code. It can be much more rewarding to edit and understand a complex layout than to learn from the ground up. So to go along with my introductory lessons, I have created a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-92","post","type-post","status-publish","format-standard","hentry","category-css-templates"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Two Column CSS Layout Template - LearnWebCode<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Two Column CSS Layout Template - LearnWebCode\" \/>\n<meta property=\"og:description\" content=\"One of the best ways to learn XHTML &#038; CSS is to simply jump into a fully functional layout and dissect the code. It can be much more rewarding to edit and understand a complex layout than to learn from the ground up. So to go along with my introductory lessons, I have created a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/\" \/>\n<meta property=\"og:site_name\" content=\"LearnWebCode\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-29T01:02:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-29T02:04:15+00:00\" \/>\n<meta name=\"author\" content=\"Brad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/\"},\"author\":{\"name\":\"Brad\",\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"headline\":\"Two Column CSS Layout Template\",\"datePublished\":\"2012-05-29T01:02:35+00:00\",\"dateModified\":\"2016-03-29T02:04:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/\"},\"wordCount\":210,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"articleSection\":[\"CSS Templates\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/\",\"url\":\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/\",\"name\":\"Two Column CSS Layout Template - LearnWebCode\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/#website\"},\"datePublished\":\"2012-05-29T01:02:35+00:00\",\"dateModified\":\"2016-03-29T02:04:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learnwebcode.com\/two-column-css-layout-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learnwebcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Two Column CSS Layout Template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learnwebcode.com\/#website\",\"url\":\"https:\/\/learnwebcode.com\/\",\"name\":\"LearnWebCode\",\"description\":\"Become a Web Developer\",\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learnwebcode.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\",\"name\":\"Brad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"url\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"contentUrl\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"width\":400,\"height\":400,\"caption\":\"Brad\"},\"logo\":{\"@id\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\"},\"url\":\"https:\/\/learnwebcode.com\/author\/lwcadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Two Column CSS Layout Template - LearnWebCode","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:\/\/learnwebcode.com\/two-column-css-layout-template\/","og_locale":"en_US","og_type":"article","og_title":"Two Column CSS Layout Template - LearnWebCode","og_description":"One of the best ways to learn XHTML &#038; CSS is to simply jump into a fully functional layout and dissect the code. It can be much more rewarding to edit and understand a complex layout than to learn from the ground up. So to go along with my introductory lessons, I have created a [&hellip;]","og_url":"https:\/\/learnwebcode.com\/two-column-css-layout-template\/","og_site_name":"LearnWebCode","article_published_time":"2012-05-29T01:02:35+00:00","article_modified_time":"2016-03-29T02:04:15+00:00","author":"Brad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Brad","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/learnwebcode.com\/two-column-css-layout-template\/#article","isPartOf":{"@id":"https:\/\/learnwebcode.com\/two-column-css-layout-template\/"},"author":{"name":"Brad","@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"headline":"Two Column CSS Layout Template","datePublished":"2012-05-29T01:02:35+00:00","dateModified":"2016-03-29T02:04:15+00:00","mainEntityOfPage":{"@id":"https:\/\/learnwebcode.com\/two-column-css-layout-template\/"},"wordCount":210,"commentCount":10,"publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"articleSection":["CSS Templates"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/learnwebcode.com\/two-column-css-layout-template\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/learnwebcode.com\/two-column-css-layout-template\/","url":"https:\/\/learnwebcode.com\/two-column-css-layout-template\/","name":"Two Column CSS Layout Template - LearnWebCode","isPartOf":{"@id":"https:\/\/learnwebcode.com\/#website"},"datePublished":"2012-05-29T01:02:35+00:00","dateModified":"2016-03-29T02:04:15+00:00","breadcrumb":{"@id":"https:\/\/learnwebcode.com\/two-column-css-layout-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learnwebcode.com\/two-column-css-layout-template\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learnwebcode.com\/two-column-css-layout-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learnwebcode.com\/"},{"@type":"ListItem","position":2,"name":"Two Column CSS Layout Template"}]},{"@type":"WebSite","@id":"https:\/\/learnwebcode.com\/#website","url":"https:\/\/learnwebcode.com\/","name":"LearnWebCode","description":"Become a Web Developer","publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learnwebcode.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6","name":"Brad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","url":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","contentUrl":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","width":400,"height":400,"caption":"Brad"},"logo":{"@id":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg"},"url":"https:\/\/learnwebcode.com\/author\/lwcadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":8,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"predecessor-version":[{"id":1032,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/92\/revisions\/1032"}],"wp:attachment":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}