Created
August 13, 2013 06:17
-
-
Save jsguy/6218324 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <!--[if lt IE 9]><html class="ie"><![endif]--> | |
| <!--[if gte IE 9]><!--><html><!--<![endif]--> | |
| <!-- | |
| The comment jumble above is handy for targeting old IE with CSS. | |
| http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ | |
| --> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> | |
| <!-- | |
| Please don't add "maximum-scale=1" here | |
| unless you know what you're doing - it can be bad for accessibility. | |
| --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <title>my page</title> | |
| <!--[if lt IE 9]> | |
| <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| <style> | |
| /* Basic reset, cf and box layout styles */ | |
| /* Reset: http://yuilibrary.com/yui/docs/cssreset/ */ | |
| html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none} | |
| /* Clearfix: http://nicolasgallagher.com/micro-clearfix-hack/ */ | |
| .cf:before, .cf:after {content: " "; display: table; } | |
| .cf:after {clear: both; } | |
| .cf { *zoom: 1; } | |
| /* Natural box layout model to all elements: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ | |
| *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } | |
| /* Adjustment for 3rd party content that doesn't work with border-box */ | |
| .contentBoxSized { box-sizing: content-box; } | |
| </style> | |
| <!-- Your styles should go in a file --> | |
| <!-- | |
| <link rel="stylesheet" href=""/> | |
| --> | |
| <style> | |
| /* Example styles - you should make your own here... */ | |
| html,body { background: #f3f3f3; font-family: sans-serif; height: 100%; } | |
| h1 { font-size: 2em } | |
| h2 { font-size: 1.5em } | |
| h3 { font-size: 1.17em } | |
| h4 { font-size: 1em } | |
| h5 { font-size: 0.83em } | |
| h6 { font-size: 0.67em } | |
| /* Center content wrappers: http://www.thesitewizard.com/css/center-div-block.shtml */ | |
| .cw { width: 990px ; margin-left: auto ; margin-right: auto; } | |
| #header { background: #ccc; padding: 1.2em 0; } | |
| #content { background: #f3f3f3; } | |
| #content .cw { background: #fff; padding: 1.2em 1em; } | |
| #footer { background: #ccc; padding: 1.2em 0; } | |
| </style> | |
| </head> | |
| <body lang="en"> | |
| <div id="header"> | |
| <div class="cw cf"> | |
| <h1>Header</h1> | |
| </div> | |
| </div> | |
| <div id="content"> | |
| <div class="cw cf"> | |
| <p>Content goes here...</p> | |
| </div> | |
| </div> | |
| <div id="footer"> | |
| <div class="cw cf"> | |
| <p>Footer</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
More about centering a Div .....
http://www.corelangs.com/css/box/center-div.html
walsh