{"id":675,"date":"2009-07-03T12:01:49","date_gmt":"2009-07-03T12:01:49","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=675"},"modified":"2018-12-19T01:51:38","modified_gmt":"2018-12-19T01:51:38","slug":"how-to-create-css-three-column-layout","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/07\/how-to-create-css-three-column-layout\/","title":{"rendered":"How to Create Css Three Column Layout"},"content":{"rendered":"<p>This is a tutorial on how to use CSS to create a simple three column layout.<br \/>\nThe 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.<br \/>\n<!--more--><br \/>\n<a href=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/how-to-create-three-column-css-layout.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/three-coloumn-css-layout.jpg\" alt=\"three-coloumn-css-layout\" title=\"three-coloumn-css-layout\" width=\"550\" height=\"334\" class=\"alignnone size-full wp-image-676\" srcset=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/three-coloumn-css-layout.jpg 550w, http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/three-coloumn-css-layout-300x182.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><br \/>\nStrep first : we create a basic html structure<\/p>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n<div id=\"page\">\r\n           <div id=\"header\">\r\n           <div id=\"sub-header\">\r\n              \r\n           <\/div>\r\n           <\/div>\r\n           <div id=\"nevigation\">\r\n                   <ul>\r\n                      <li><a href=\"#\">Home<\/a><\/li>\r\n                      <li><a href=\"#\">About us<\/a><\/li>\r\n                      <li><a href=\"#\">Services<\/a><\/li>\r\n                      <li><a href=\"#\">Products<\/a><\/li>\r\n                      <li><a href=\"#\">Sitemap<\/a><\/li>\r\n                      <li><a href=\"#\">Contact Us<\/a><\/li>\r\n                  <\/ul>\r\n           <\/div>\r\n           <div id=\"content\">\r\n                 <div id=\"sub-content\">\r\n                 <div id=\"column1\">\r\n                 <h2>About Us<\/h2>\r\n                   <p>Lorem ipsum dolor sit amet, consectetur \r\n                   adipiscing elit. Ut viverra dui nec risus.\r\n                    In eu neque a tortor lacinia rhoncus. In \r\n                    interdum placerat purus. Lorem ipsum dolor\r\n                     sit amet, consectetur adipiscing elit.\r\n                      Suspendisse potenti.Lorem ipsum \r\n                      dolor sit amet, <\/p>\r\n\r\n                  <p>Lorem ipsum dolor sit amet, consectetur \r\n                   adipiscing elit. Ut viverra dui nec risus.\r\n                    In eu neque a tortor lacinia rhoncus. In \r\n                    interdum placerat purus. Lorem ipsum dolor\r\n                     sit amet, consectetur adipiscing elit.\r\n                      Suspendisse potenti.Lorem ipsum \r\n                      dolor sit amet, <a href=\"#\">Readmore<\/a><\/p>\r\n                 <\/div>\r\n                 <div id=\"column2\">\r\n                 <h2>Services<\/h2>\r\n                   <p>Lorem ipsum dolor sit amet, consectetur \r\n                   adipiscing elit. Ut viverra dui nec risus.\r\n                    In eu neque a tortor lacinia rhoncus. In \r\n                    interdum placerat purus. Lorem ipsum dolor\r\n                     sit amet, consectetur adipiscing elit.\r\n                      Suspendisse potenti.Lorem ipsum \r\n                      dolor sit amet,<\/p>\r\n\r\n                  <p>Lorem ipsum dolor sit amet, consectetur \r\n                   adipiscing elit. Ut viverra dui nec risus.\r\n                    In eu neque a tortor lacinia rhoncus. In \r\n                    interdum placerat purus. Lorem ipsum dolor\r\n                     sit amet, consectetur adipiscing elit.\r\n                      Suspendisse potenti.Lorem ipsum \r\n                      dolor sit amet, <a href=\"#\">Readmore<\/a><\/p>\r\n                 <\/div>\r\n                  <div id=\"column3\">\r\n                 <h2>Contact Detail<\/h2>\r\n                   <p>Lorem ipsum dolor sit amet, consectetur \r\n                   adipiscing elit. Ut viverra dui nec risus.\r\n                    In eu neque a tortor lacinia rhoncus. In \r\n                    interdum placerat purus. Lorem ipsum dolor\r\n                     sit amet, consectetur adipiscing elit.\r\n                      Suspendisse potenti.Lorem ipsum \r\n                      dolor sit amet, <\/p>\r\n\r\n                  <p>Lorem ipsum dolor sit amet, consectetur \r\n                   adipiscing elit. Ut viverra dui nec risus.\r\n                    In eu neque a tortor lacinia rhoncus. In \r\n                    interdum placerat purus. Lorem ipsum dolor\r\n                     sit amet, consectetur adipiscing elit.\r\n                      Suspendisse potenti.Lorem ipsum \r\n                      dolor sit amet, <a href=\"#\">Readmore<\/a><\/p>\r\n                 <\/div>\r\n               <\/div>\r\n            <\/div>\r\n             <div id=\"bottom\">\r\n                  <div id=\"sub-bottom\">\r\n                  <span>Copyright &copy; Developer's Paradise \r\n                   Designed By Developer's Paradise<\/span>\r\n                  <\/div>\r\n               <\/div>\r\n     <\/div>\r\n[\/code]\r\n<\/pre>\n<p>Second step: we create a basic css structure<\/p>\n<pre>\r\n[code lang=\"css\"]\r\n*{ margin:0; padding:0;}\r\n\r\nh1,h2,h3,h4 {\r\nfont:100% \"Georgia\", Times New Roman, Times, serif;\r\ncolor:#fff;\r\ntext-transform:uppercase;\r\nletter-spacing:2px\r\n}\r\n\r\nh1 {\r\nfont-size:400%;\r\ntext-align:center;\r\npadding:35px 0 0 0;\r\n}\r\n\r\nh2 {font-size:150%;}\r\nh3 {font-size:137%;}\r\nh4 {font-size:120%;text-align:center; color:#848484;}\r\n\r\nul,ol,li {list-style-type:none;}\r\n\r\na {text-decoration:none; color:#00CCFF}\r\n\r\na:hover { text-decoration:underline;}\r\n\r\np {\r\ncolor:#fff;\r\nfont-size:12px;\r\nfont-family:\"Georgia\", Times New Roman, Times, serif;\r\ncolor:#fff;\r\npadding:0 0 10px 0;\r\nline-height:22px;\r\n}\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\nbody {\r\nfont:100% normal \"Georgia\", Times New Roman, Times, serif;\r\nbackground:#191919;\r\n}\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\n#page { \r\nbackground:#323232;\r\nwidth:971px;\r\nmargin:0 auto;\r\nheight:100%;\r\nborder-left:1px solid #353535;\r\nborder-right:1px solid #353535;\r\npadding:12px 0 12px 0;\r\n}\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\n#header {\r\nmargin: 0px auto 0 auto;\r\nwidth:943px;\r\nbackground:#222;\r\nborder:1px solid #424242;\r\n}\r\n\r\n#sub-header {\r\nmargin:1px;\r\npadding:1px;\r\nbackground:#333;\r\noverflow:hidden;\r\nheight:150px;\r\n}\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\n#nevigation {\r\nmargin: 5px auto 0 auto;\r\nwidth:943px;\r\nbackground:#222;\r\nborder:1px solid #424242;\r\n}\r\n#nevigation ul {\r\nmargin:1px;\r\npadding:0px;\r\nbackground:#333;\r\noverflow:hidden;\r\n}\r\n#nevigation li {\r\ndisplay: inline;\/*ie*\/\r\n}\r\n\r\n#nevigation li a {\r\nfloat:left;\r\nmargin:0;\r\npadding:7px 10px;\r\ndisplay: block;\r\ncolor:#fff;\r\ntext-transform:uppercase;\r\nletter-spacing:2px;\r\n}\r\n#nevigation li a:hover {\r\nbackground:#424242;\r\ntext-decoration:none;\r\ncolor:#00CCFF;\r\n}\r\n[\/code]\r\n[code lang=\"css\"]\r\n#content {\r\nwidth:943px;\r\nmargin:5px auto 0 auto;\r\nbackground:#222;\r\nborder:1px solid #424242; \r\n}\r\n\r\n#sub-content {\r\nmargin:1px;\r\npadding:1px;\r\nbackground:#333;\r\noverflow:hidden;\r\n}\r\n[\/code]\r\n[code lang=\"css\"]\r\n#column1 {\r\nwidth:302px;\r\nbackground:#424242;\r\nmargin:0 1px 0 0;\r\npadding:5px;\r\nfloat:left;\r\n}\r\n#column2 {\r\nwidth:302px;\r\nbackground:#424242; \r\nmargin:0 1px 0 0;\r\npadding:5px;\r\nfloat:left;\r\n}\r\n#column3 {\r\nwidth:303px;\r\nbackground:#424242;\r\nmargin:0;\r\npadding:5px;\r\nfloat:left;\r\n}\r\n[\/code]\r\n[code lang=\"css\"]\r\n#bottom {\r\nwidth:943px;\r\nmargin:5px auto 0 auto;\r\nbackground:#222;\r\nborder:1px solid #424242;\r\n}\r\n\r\n#sub-bottom {\r\nmargin:1px;\r\npadding:20px 0 0 0px;\r\nbackground:#333;\r\noverflow:hidden;\r\nheight:50px;\r\ncolor: #fff;\r\ntext-align:center;\r\ntext-transform:uppercase;\r\nletter-spacing:2px;\r\n} \r\n[\/code]\r\n<\/pre>\n<p>Finally we have created three column css layout. <a href='http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/how-to-create-three-column-css-layout.html'>View Example<\/a> and <a href='http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/how-to-create-three-column-css-layout.rar'>Download this file<\/a>. <\/p>\n<p>I would be greatful if you could take a second to help promote my blog and share this link with any of your favoured networking sites using the link below\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a tutorial on how to use CSS to create a simple three 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\/07\/how-to-create-css-three-column-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-675","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\/675","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=675"}],"version-history":[{"count":19,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions"}],"predecessor-version":[{"id":697,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions\/697"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}