{"id":70225,"date":"2021-08-29T20:30:37","date_gmt":"2021-08-30T00:30:37","guid":{"rendered":"http:\/\/bangla.salearningschool.com\/recent-posts\/layouts-with-css-layout-without-tables-10\/"},"modified":"2021-08-29T20:30:37","modified_gmt":"2021-08-30T00:30:37","slug":"layouts-with-css-layout-without-tables-10","status":"publish","type":"post","link":"http:\/\/bangla.sitestree.com\/?p=70225","title":{"rendered":"Layouts with CSS: Layout without tables #10"},"content":{"rendered":"

Two column webpage layout with CSS<\/h2>\n

create twocol.css. Then, add the following code to the file: <\/p>\n

div#topBanner { text-align: center; padding-bottom: 10px; }<\/p><\/blockquote>\n

\n

div#bodyLeft { position: absolute; width: 25%; }<\/p><\/blockquote>\n<\/div>\n

\n

div#bodyRight { margin: 5px 25px 25px 225px; width: 75%; }<\/p><\/blockquote>\n

Your two column webpage will look like<\/h2>\n
\n
Page Title<\/div>\n<\/blockquote>\n
\n
Add menu items here<\/div>\n<\/blockquote>\n
\n
Add your content here<\/div>\n<\/blockquote>\n

Three column webpage with CSS<\/h2>\n

Create a file like threecol.css. Put the following code<\/p>\n

div#bodyLeft { position: absolute; padding-left: 10px; width: 25%; }<\/p><\/blockquote>\n

div#bodyCenter { margin-left: 190px; margin-right: 190px; width: 50%; position: absolute; }<\/p><\/blockquote>\n

div#bodyRight { position: absolute; padding-right: 10px; width: 25%; right: 0%; }<\/p><\/blockquote>\n

div#topBanner { text-align: center; padding-bottom: 15px; }<\/p><\/blockquote>\n

Your three column webpage will look as follows<\/p>\n

\n
Page Title<\/div>\n<\/blockquote>\n
\n
Add menu items here<\/div>\n<\/blockquote>\n
\n
Add your content here<\/div>\n<\/blockquote>\n
\n
Add your content here<\/div>\n<\/blockquote>\n

Then, add your text and\/or graphics to the file.<\/p>\n<\/div>\n

From: http:\/\/sitestree.com\/?p=4730
Categories:10
Tags:
Post Data:2011-05-20 14:21:44<\/p>\n

    Shop Online: <a href='https:\/\/www.ShopForSoul.com\/' target='new' rel=\"noopener\">https:\/\/www.ShopForSoul.com\/<\/a>\n    (Big Data, Cloud, Security, Machine Learning): Courses: <a href='http:\/\/Training.SitesTree.com' target='new' rel=\"noopener\"> http:\/\/Training.SitesTree.com<\/a> \n    In Bengali: <a href='http:\/\/Bangla.SaLearningSchool.com' target='new' rel=\"noopener\">http:\/\/Bangla.SaLearningSchool.com<\/a>\n    <a href='http:\/\/SitesTree.com' target='new' rel=\"noopener\">http:\/\/SitesTree.com<\/a>\n    8112223 Canada Inc.\/JustEtc: <a href='http:\/\/JustEtc.net' target='new' rel=\"noopener\">http:\/\/JustEtc.net (Software\/Web\/Mobile\/Big-Data\/Machine Learning) <\/a>\n    Shop Online: <a href='https:\/\/www.ShopForSoul.com'> https:\/\/www.ShopForSoul.com\/<\/a>\n    Medium: <a href='https:\/\/medium.com\/@SayedAhmedCanada' target='new' rel=\"noopener\"> https:\/\/medium.com\/@SayedAhmedCanada <\/a>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Two column webpage layout with CSS create twocol.css. Then, add the following code to the file: div#topBanner { text-align: center; padding-bottom: 10px; } div#bodyLeft { position: absolute; width: 25%; } div#bodyRight { margin: 5px 25px 25px 225px; width: 75%; } Your two column webpage will look like Page Title Add menu items here Add your … <\/p>\n
Continue reading<\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1917],"tags":[],"class_list":["post-70225","post","type-post","status-publish","format-standard","hentry","category-fromsitestree-com","item-wrap"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":70245,"url":"http:\/\/bangla.sitestree.com\/?p=70245","url_meta":{"origin":70225,"position":0},"title":"Table Less Design: Layouts with CSS #10","author":"Author-Check- Article-or-Video","date":"August 30, 2021","format":false,"excerpt":"A three column webpage with CSS positioning The CSS should look like this: #leftnavigation { position : absolute; left : 0; width : 150px; margin-left : 10px; margin-top : 20px; color : #000000; padding : 3px;}#rightnavigation { position : absolute; left : 80%; top : 20px; width : 140px; padding-left\u2026","rel":"","context":"In "FromSitesTree.com"","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7855,"url":"http:\/\/bangla.sitestree.com\/?p=7855","url_meta":{"origin":70225,"position":1},"title":"\u099f\u09c7\u09ac\u09bf\u09b2 \u099b\u09be\u09dc\u09be \u09b9\u09cb\u09ae \u09aa\u09c7\u099c \u09a4\u09c8\u09b0\u09bf \u0995\u09b0\u09be\u0964","author":"Author-Check- Article-or-Video","date":"March 28, 2015","format":false,"excerpt":"\u099f\u09c7\u09ac\u09bf\u09b2 \u099b\u09be\u09dc\u09be \u09b9\u09cb\u09ae \u09aa\u09c7\u099c \u09a4\u09c8\u09b0\u09bf \u0995\u09b0\u09be\u0964 Notepad \u0996\u09c1\u09b2\u09c1\u09a8 \u098f\u09ac\u0982 \u09a4\u09be\u09a4\u09c7 \u09a8\u09bf\u099a\u09c7\u09b0 \u0995\u09cb\u09a1 \u0997\u09c1\u09b2\u09cb \u09b2\u09bf\u0996\u09c1\u09a8-