Posted By

stavelin on 09/11/08

Tagged

css
html

Versions (?)

Last Edited at 09/11/08 10:04am

Statistics

Viewed 719 times

Favorited by 4 user(s)

Related snippets

CSS Layout Starting Points (by Rachel Andrew)

/ Published in: HTML

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.

Highlighted TextExpand

// ==========
	// = 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;
 }

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.