advanced code snippet search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

stavelin on 09/11/08


Tagged

css html dead starting points 24ways giveaway


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

l1r
superdeluxesam
eriksagen
vitech


CSS Layout Starting Points (by Rachel Andrew)

Published in: HTML 

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

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.

Plain TextExpand 
  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.  }

Report this snippet 

You need to login to post a comment.