Advanced Search

Return to Snippet

Revision: 38199
at January 5, 2011 02:17 by blueocto
Updated Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0px; padding:0px;}
body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}
#container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}
#header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;}
#header h1{color:#fff; text-align:left;}
#leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; }
#midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;}
#midcol p{margin-bottom:10px;}
#rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; overflow:hidden; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;}
#footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}
</style>
</head>

<body>

<div id="container">
  <div id="header"><h1>This is the Header</h1></div>
  
  <!-- START LEFT COLUMN -->
  <div id="leftcol">
  	<h2>The left column</h2>
    <p>And the text for the left column</p>
  </div>
  
  <!-- START CENTER COLUMN -->
  <div id="midcol">
  	<h2>The middle column</h2>
    <p>And some text for the center column</p>
  </div>
  
  <!-- START RIGHT COLUMN -->
  <div id="rightcol">
    <h2>The right column</h2>
    <p>And then again, some text for the right column</p><p>And then again, some text for the right column</p>
    <p>And then again, some text for the right column</p><p>And then again, some text for the right column</p>
  </div>
  
  <hr style="display:block; height:0.1em; clear:both; visibility:hidden;" />
  <div id="footer">Footer</div>
</div>

</body>
</html>

Revision: 38198
at December 28, 2010 11:45 by blueocto
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<style type="text/css">
* {margin:0px; padding:0px;} body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em} #container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;} #header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;} #header h1{color:#fff; text-align:left;} #leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; } #midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;} #midcol p{margin-bottom:10px;} #rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; overflow:hidden; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;} #footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}

</style>
</head>

<body>
<div id="container">

	<div id="header"><h1>This is the Header</h1></div>

<!--*************************************START LEFT COLUMN ***********************************************-->

		<div id="leftcol"><h2>The left column</h2><p>And the text for the left column</p></div>

<!--*************************************END LEFT COLUMN ***********************************************-->

<!--*************************************START CENTER COLUMN ***********************************************-->

			<div id="midcol"><h2>The middle column</h2><p>And some text for the center column</p>

			</div>

<!--*************************************END CENTER COLUMN ***********************************************-->

<!--*************************************START RIGHT COLUMN ***********************************************-->

		<div id="rightcol"><h2>The right column</h2><p>And then again, some text for the right column</p><p>And then again, some text for the right column</p>
<p>And then again, some text for the right column</p><p>And then again, some text for the right column</p>
</div>
<!--*************************************END RIGHT COLUMN ***********************************************-->

<hr style="display:block; height:0.1em; clear:both; visibility:hidden;" />
<div id="footer">Footer</div>

</div>
<!--*************************************END MAIN CONTAINER ***********************************************-->
</body>
</html>
Initial URL 









Initial Description














Initial Title





100% Height 3 column layout









Initial Tags














Initial Language





XHTML