Advanced Search

Return to Snippet

Revision: 8277
at September 11, 2008 10:04 by stavelin
Initial Code 
// ==========
	// = HTML =
	// ==========


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Fixed Width and Centred starting point document</title>
     <link rel="stylesheet" type="text/css" href="fixed-width-centred.css" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrapper">
     <div id="side">
          <div class="inner">
               <p>Sidebar content here</p>
          </div>
     </div>
     <div id="content">
          <div class="inner">
               <p>Your main content goes here.</p>
          </div>
     </div>
     <div id="footer">
          <div class="inner">
               <p>Ho Ho Ho!</p>
          </div>
     </div>
</div>
</body>
</html>


	
	// ==========
	// = CSS =
	// ==========



body {
     text-align: center;
     min-width: 740px;
     padding: 0;
     margin: 0;
 }

 #wrapper {
     text-align: left;
     width: 740px;
     margin-left: auto;
     margin-right: auto;
     padding: 0;
 }

 #content {
     margin: 0 200px 0 0;
 }

 #content .inner {
     padding-top: 1px;
     margin: 0 10px 10px 10px;
 }

 #side {
     float: right;
     width: 180px;
     margin: 0;
 }

 #side .inner {
     padding-top: 1px;
     margin: 0 10px 10px 10px;
 }

 #footer {
     margin-top: 10px;
     clear: both;
 }

 #footer .inner {
     margin: 10px;
 }
Initial URL 
http://24ways.org/2005/css-layout-starting-points
Initial Description 
This code is both basic and available from 24ways.org, but it's damn handy to reach through the snipplr plugin from textMate.

PS: all cred to Rachel Andrew & the 24ways team.
Initial Title 
CSS Layout Starting Points (by Rachel Andrew)
Initial Tags 
css, html
Initial Language 
HTML