Advanced Search

CSS Layout Starting Points (by Rachel Andrew)

/ Published in: HTML
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // ==========
  2. 	// = HTML =
  3. 	// ==========
  4.  
  5.  
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  7.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  8. <html xmlns="http://www.w3.org/1999/xhtml">
  9. <head>
  10.      <title>Fixed Width and Centred starting point document</title>
  11.      <link rel="stylesheet" type="text/css" href="fixed-width-centred.css" />
  12.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  13. </head>
  14. <body>
  15. <div id="wrapper">
  16.      <div id="side">
  17.           <div class="inner">
  18.                <p>Sidebar content here</p>
  19.           </div>
  20.      </div>
  21.      <div id="content">
  22.           <div class="inner">
  23.                <p>Your main content goes here.</p>
  24.           </div>
  25.      </div>
  26.      <div id="footer">
  27.           <div class="inner">
  28.                <p>Ho Ho Ho!</p>
  29.           </div>
  30.      </div>
  31. </div>
  32. </body>
  33. </html>
  34.  
  35.  
  36.  
  37. 	// ==========
  38. 	// = CSS =
  39. 	// ==========
  40.  
  41.  
  42.  
  43. body {
  44.      text-align: center;
  45.      min-width: 740px;
  46.      padding: 0;
  47.      margin: 0;
  48.  }
  49.  
  50.  #wrapper {
  51.      text-align: left;
  52.      width: 740px;
  53.      margin-left: auto;
  54.      margin-right: auto;
  55.      padding: 0;
  56.  }
  57.  
  58.  #content {
  59.      margin: 0 200px 0 0;
  60.  }
  61.  
  62.  #content .inner {
  63.      padding-top: 1px;
  64.      margin: 0 10px 10px 10px;
  65.  }
  66.  
  67.  #side {
  68.      float: right;
  69.      width: 180px;
  70.      margin: 0;
  71.  }
  72.  
  73.  #side .inner {
  74.      padding-top: 1px;
  75.      margin: 0 10px 10px 10px;
  76.  }
  77.  
  78.  #footer {
  79.      margin-top: 10px;
  80.      clear: both;
  81.  }
  82.  
  83.  #footer .inner {
  84.      margin: 10px;
  85.  }

URL: http://24ways.org/2005/css-layout-starting-points

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.