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.


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. <title>Fixed Width and Centred starting point document</title>
  10. <link rel="stylesheet" type="text/css" href="fixed-width-centred.css" />
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  12. </head>
  13. <div id="wrapper">
  14. <div id="side">
  15. <div class="inner">
  16. <p>Sidebar content here</p>
  17. </div>
  18. </div>
  19. <div id="content">
  20. <div class="inner">
  21. <p>Your main content goes here.</p>
  22. </div>
  23. </div>
  24. <div id="footer">
  25. <div class="inner">
  26. <p>Ho Ho Ho!</p>
  27. </div>
  28. </div>
  29. </div>
  30. </body>
  31. </html>
  32.  
  33.  
  34.  
  35. // ==========
  36. // = CSS =
  37. // ==========
  38.  
  39.  
  40.  
  41. body {
  42. text-align: center;
  43. min-width: 740px;
  44. padding: 0;
  45. margin: 0;
  46. }
  47.  
  48. #wrapper {
  49. text-align: left;
  50. width: 740px;
  51. margin-left: auto;
  52. margin-right: auto;
  53. padding: 0;
  54. }
  55.  
  56. #content {
  57. margin: 0 200px 0 0;
  58. }
  59.  
  60. #content .inner {
  61. padding-top: 1px;
  62. margin: 0 10px 10px 10px;
  63. }
  64.  
  65. #side {
  66. float: right;
  67. width: 180px;
  68. margin: 0;
  69. }
  70.  
  71. #side .inner {
  72. padding-top: 1px;
  73. margin: 0 10px 10px 10px;
  74. }
  75.  
  76. #footer {
  77. margin-top: 10px;
  78. clear: both;
  79. }
  80.  
  81. #footer .inner {
  82. margin: 10px;
  83. }

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.