{"absolute_url": "/deric/css-3-column-layout/", "blog_post": false, "code": "\n\n\nCSS Three Column Liquid Layout by Mani Sheriar\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\t

This is the header

\n
\n\n
\n\t\n\t
\n\t\n\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\t

This is the left column

\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\t

This is the right column

\n\t\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t

This is the center column

\n\t\t\t
\n\t\t\t\t\n\t\t
\n\t\t\t\t\n\t\t
\n\t\t\t

This is the footer

\n\t\t
\n\t\n\t
\n\n
\n\t\n\n\n", "created": "2010-08-18T13:37:12", "description": null, "description_rendered": "None", "embed_url": "https://snipt.net/embed/065d32d0f7c2cae5211091d742a74108/", "full_absolute_url": "/deric/css-3-column-layout/", "id": 17579, "lexer": "html", "line_count": 152, "log_entries": [], "meta": null, "modified": "2019-08-24T04:02:35.850878", "publish_date": null, "raw_url": "/raw/065d32d0f7c2cae5211091d742a74108/", "resource_uri": "/api/public/snipt/17579/", "slug": "css-3-column-layout", "stylized": "
  1\n  2\n  3\n  4\n  5\n  6\n  7\n  8\n  9\n 10\n 11\n 12\n 13\n 14\n 15\n 16\n 17\n 18\n 19\n 20\n 21\n 22\n 23\n 24\n 25\n 26\n 27\n 28\n 29\n 30\n 31\n 32\n 33\n 34\n 35\n 36\n 37\n 38\n 39\n 40\n 41\n 42\n 43\n 44\n 45\n 46\n 47\n 48\n 49\n 50\n 51\n 52\n 53\n 54\n 55\n 56\n 57\n 58\n 59\n 60\n 61\n 62\n 63\n 64\n 65\n 66\n 67\n 68\n 69\n 70\n 71\n 72\n 73\n 74\n 75\n 76\n 77\n 78\n 79\n 80\n 81\n 82\n 83\n 84\n 85\n 86\n 87\n 88\n 89\n 90\n 91\n 92\n 93\n 94\n 95\n 96\n 97\n 98\n 99\n100\n101\n102\n103\n104\n105\n106\n107\n108\n109\n110\n111\n112\n113\n114\n115\n116\n117\n118\n119\n120\n121\n122\n123\n124\n125\n126\n127\n128\n129\n130\n131\n132\n133\n134\n135\n136\n137\n138\n139\n140\n141\n142\n143\n144\n145\n146\n147\n148\n149\n150\n151
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml">\n<head>\n<title>CSS Three Column Liquid Layout by Mani Sheriar</title>\n<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />\n\n<!-- Please feel free to use this code in any way that you would like.  If you want to be cool, you can credit me - Mani Sheriar | www.ManiSheriar.com | Design@ManiSheriar.com.  Enjoy! -->\n\n\n<style type="text/css">\n/* CSS Document */\n\nbody {\n\tbackground:#9343B9;\n\ttext-align:center;\n\tmargin:20px;\n\tpadding:0;\n\tfont:normal 0.8em/1.2em verdana,aria,sans-serif;\n\tcolor:#666;\n\t}\na {\n\tcolor:#FFF;\n\ttext-decoration:none;\n\tborder-bottom:1px dotted;\n\t}\na:hover {\n\tborder-bottom:1px solid;\n\tcolor:#9343B9;\n\t}\n#wrapper1 {\n\tposition:relative;\n\ttext-align:left;\n\twidth:100%;\n\tbackground:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;\n\t}\n#wrapper2 {\n\tposition:relative;\n\ttext-align:left;\n\twidth:100%;\n\tbackground:url("../images/leftcolor_bg.gif") repeat-y top left;\n\t}\n#header {\n\tbackground:#BB62AB;\n\tpadding:10px;\n\tmargin:0;\n\ttext-align:center;\n\tcolor:#FFF;\n\t}\n#header h1 {\n\tfont-size:200%;\n\t}\n#header a:hover {\n\tcolor:#7A2875;\n\t}\n#maincol {\n\tposition:relative;\n\tmargin:0;\n\tpadding:10px;\n\t}\n#leftcol { \n\tposition:relative;\n\ttop:-10px;\n\tleft:-10px;\n\tfloat:left;\n\twidth:220px;  /* for IE5/WIN */\n\tvoice-family: "\\"}\\"";\n\tvoice-family:inherit;\n\twidth:200px; /* actual value */\n\tmargin:0 0 -10px 0;\n\tpadding:10px;\n\tbackground:#ECB9E8;\n\tz-index:100;\n\t}\n#rightcol {\n\tposition:relative;\n\ttop:-10px;\n\tright:-10px;\n\tfloat:right;\n\twidth:220px;  /* for IE5/WIN */\n\tvoice-family: "\\"}\\"";\n\tvoice-family:inherit;\n\twidth:200px; /* actual value */\n\tmargin:0 0 -10px 0;\n\tpadding:10px;\n\tbackground:#D7C4FA;\n\tz-index:99;\n\t}\n#centercol {\n\tposition:relative;\n\tpadding:0 240px;\n\t}\n#centercol a {\n\tcolor:#666;\n\t}\n#centercol a:hover {\n\tborder-bottom:1px solid;\n\tcolor:#9343B9;\n\t}\n#footer {\n\tposition:relative;\n\ttop:1px;\n\tbackground:#7A2875;\n\twidth:100%;\n\tclear:both;\n\tmargin:0;\n\tpadding:1% 0;\n\ttext-align:center;\n\tcolor:#CCC;\n\t}\n</style>\n\n\n\n</head>\n\n<body>\n\n<div id="header"><!-- begin header -->\n\t<h1>This is the header</h1>\n</div><!-- end header -->\n\n<div id="wrapper1"><!-- sets background to white and creates full length leftcol-->\n\t\n\t<div id="wrapper2"><!-- sets background to white and creates full length rightcol-->\n\t\n\t\t<div id="maincol"><!-- begin main content area -->\n\t\t\t\t\n\t\t\t<div id="leftcol"><!-- begin leftcol -->\n\t\t\t\t<p>This is the left column</p>\n\t\t\t</div><!-- end leftcol -->\n\t\t\t\t\n\t\t\t<div id="rightcol"><!-- begin rightcol -->\n\t\t\t\t<p>This is the right column</p>\n\t\t\t</div><!-- end righttcol -->\n\t\t\t\n\t\t\t<div id="centercol"><!-- begin centercol -->\n\t\t\t\t<p>This is the center column </p>\n\t\t\t</div><!-- end centercol -->\n\t\t\t\t\n\t\t</div><!-- end main content area -->\n\t\t\t\t\n\t\t<div id="footer"><!-- begin footer -->\n\t\t\t<p>This is the footer</p>\n\t\t</div><!-- end footer -->\n\t\n\t</div><!-- end wrapper1 -->\n\n</div><!-- end wrapper2 -->\n\t\n</body>\n</html>\n
\n
", "tags": [{"absolute_url": "/public/tag/css/", "id": 20, "name": "css", "resource_uri": "/api/public/tag/20/", "snipts": "/api/public/snipt/?tag=20"}, {"absolute_url": "/public/tag/xhtml/", "id": 244, "name": "xhtml", "resource_uri": "/api/public/tag/244/", "snipts": "/api/public/snipt/?tag=244"}, {"absolute_url": "/public/tag/3-column/", "id": 7828, "name": "3 column", "resource_uri": "/api/public/tag/7828/", "snipts": "/api/public/snipt/?tag=7828"}], "title": "css 3 column layout", "user": {"absolute_url": "/deric/", "email_md5": "1044df0dd78d381b7629c4a79ccf72e5", "id": 5447, "resource_uri": "/api/public/user/5447/", "snipts": "/api/public/snipt/?user=5447", "snipts_count": 7, "username": "deric"}}