{"id":65,"date":"2009-06-16T08:27:49","date_gmt":"2009-06-16T08:27:49","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=65"},"modified":"2019-03-22T23:55:54","modified_gmt":"2019-03-22T23:55:54","slug":"simple-2-column-css-layout","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/06\/simple-2-column-css-layout\/","title":{"rendered":"Simple 2 column css layout"},"content":{"rendered":"<p>This is a tutorial on how to use CSS to create a simple two column layout.<\/p>\n<p>The layout consists of a header, a main content column, a sidebar, and a footer. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.<\/p>\n<p><!--more--><\/p>\n<h3>1. Basic structure<\/h3>\n<p>First of all, we create the basic HTML structure:<\/p>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n<div id=\"page\">\r\n   <div id=\"header\"><\/div>\r\n   <div id=\"sidebar\"><\/div>\r\n   <div id=\"main\"><\/div>\r\n   <div id=\"footer\"><\/div>\r\n<\/div>\r\n[\/code]\r\n\r\n<p>After that, we put some content in the different sections:<\/p>\r\n\r\n[code lang=\"htmlstrict\"]\r\n<div id=\"page\">\r\n    <div id=\"header\">\r\n       <h1>Company Name<\/h1>\r\n       <h4>Type your slogan<\/h4>\r\n    <\/div>\r\n\r\n         <div id=\"sidebar\">\r\n            <h2>Navigation<\/h2>\r\n\t\t\t   <ul>\r\n\t\t\t\t  <li><a href=\"#\">Home<\/a><\/li>\r\n\t\t\t\t  <li><a href=\"#\">About us<\/a><\/li>\r\n\t\t\t\t  <li><a href=\"#\">Srevices<\/a><\/li>\r\n\t\t\t\t  <li><a href=\"#\">Contact<\/a><\/li>\r\n\t\t\t\t  <li><a href=\"#\">Sitemap<\/a><\/li>\r\n\t\t\t   <\/ul>\r\n         <\/div>\r\n\r\n              <div id=\"main\">\r\n\t            <h2>Content<\/h2>\r\n\t         <p>Lorem ipsum dolor sit amet, consectetuer dipiscing\r\n elit. Cum dis parturient montes, nascetur ridiculus mus. January 1, \r\n2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum dis \r\nparturient montes, nascetur ridiculus mus. January 1, 2002 <\/p>\r\n            <\/div>\r\n            <div id=\"footer\">\r\n              <h2>Footer<\/h2>\r\n          <\/div>\r\n     <\/div>\r\n[\/code]\r\n<\/pre>\n<h3>2. Css Code<\/h3>\n<p>Now we create css code:<\/p>\n<pre>\r\n[code lang=\"css\"]\r\n\/*style two column layout*\/\r\n*{margin:0; padding:0;}\r\nbody\r\n{\r\nfont-size:100%;\r\nfont-weight:normal;\r\nfont-family:Arial, Helvetica, sans-serif;\r\n}\r\n* html, body\r\n{\r\nheight:100%;\r\nmin-height:100%\/*firefox*\/;\r\n}\r\n[\/code]\r\n[code lang=\"css\"]\r\nhtml,#page\r\n{ \r\nmargin:0;\r\npadding:0;\r\nheight:100%;\r\n}\r\n#page\r\n{\r\n margin:0 auto;\r\n padding:0;\r\n width:1009px;\r\n height:100%;\r\n}\r\n[\/code]\r\n[code lang=\"css\"]\r\na{text-decoration:none;}\r\n\r\na:hover{ text-decoration:underline}\r\n\r\nul,ol,li{margin:0; padding:0;}\r\n\r\n\r\nh1,h2,h3,h4,h5,h6\r\n{\r\nmargin:0;\r\npadding:10px 0 0 20px;\r\n}\r\n\r\nh1{font-size:28px;}\r\nh2{font-size:24px;}\r\nh3{font-size:18px;}\r\nh4{font-size:12px;}\r\nh5{font-size:10px;}\r\n\r\np{margin:0;\r\nline-height:18px;\r\npadding:0 0 10px 20px;\r\nfont-size:12px; \r\n}\r\n\r\n#page\r\n{\r\n margin:0 auto;\r\n padding:0;\r\n width:1009px;\r\n height:100%;\r\n}\r\n\r\n#header\r\n{\r\nmargin:0;\r\npadding:0;\r\nwidth:100%;\r\nheight:151px;\r\ndisplay:block;\r\nbackground-color:#eeeeee;\r\n}\r\n\r\n#sidebar\r\n{\r\nfloat:left;\r\nmargin:0;\r\npadding:0;\r\ndisplay:inline\/*internet explorer*\/;\r\nwidth:200px;\r\nheight:100%;\r\nbackground-color:#cccccc;\r\n}\r\n\r\n#sidebar ul\r\n{list-style-type:none;}\r\n\r\n#sidebar ul li{ display: inline\/*internet explore*\/;}\r\n\r\n#sidebar ul li a\r\n{ \r\npadding:3px 4px;\r\ndisplay:block;\r\nmargin:0px 0 0 16px;\r\ntext-decoration:none;\r\ncolor:#0000E8\r\n}\r\n\r\n#sidebar ul li a:hover\r\n{color: #CC0000} \r\n\r\n#main\r\n{\r\nmargin:0;\r\npadding:0;\r\nfloat:left;\r\ndisplay:block;\r\nwidth:809px;\r\nheight:100%;\r\nbackground:#dddddd\r\n}\r\n#footer\r\n{\r\nmargin:0;\r\npadding:0;\r\ndisplay:block;\r\nwidth:100%;\r\nheight:50px;\r\nbackground:#eeeeee;\r\noverflow:hidden;\r\n}\r\n[\/code]\r\n<\/pre>\n<p>finaly we are done. We have created a simple 2 column css layout.Click here to see the example<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a tutorial on how to use CSS to create a simple two column layout. The layout consists of a header, a main content column, a sidebar, and a footer. A pretty basic layout, and not at all difficult &hellip; <a href=\"http:\/\/aceinfowayindia.com\/blog\/2009\/06\/simple-2-column-css-layout\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,56],"tags":[52,23],"class_list":["post-65","post","type-post","status-publish","format-standard","hentry","category-css","category-tutorials","tag-css","tag-tutorials"],"_links":{"self":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":18,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":83,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions\/83"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}