Skip to content

Instantly share code, notes, and snippets.

@Githerdone
Created July 16, 2013 14:46
Show Gist options
  • Save Githerdone/6009411 to your computer and use it in GitHub Desktop.
Save Githerdone/6009411 to your computer and use it in GitHub Desktop.
Untitled
.container {
/*
If you have a block-level element of a certain width, margin: 0 auto;
will how you center it inside its parent container.
See: http://bluerobot.com/web/css/center1.html
*/
margin: 0 auto;
width: 720px;
}
.content {
width: 600px;
border-right-style:solid;
border-color: gray;
padding-bottom:0px;
}
.footer{
border-top-style:solid;
border-color: gray;
padding-top: 10px;
padding-bottom:10px;
}
nav{
position: relative;
display: inline-block;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
normalize.css removes cross-browser differences in defaults, e.g.,
differences in how form elements appear between Firefox and IE
See: http://necolas.github.com/normalize.css/
-->
<link rel="stylesheet" href="normalize.css">
<!-- Put your challenge-specific CSS in here -->
<link rel="stylesheet" href="main.css">
<title></title>
</head>
<body>
<div class="container">
<header>
<h1>My Sweet Blog</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<br clear="all">
</nav>
<div class="content">
<h2>My Blog Post Title</h2>
<section>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section>
<h3>Some New Section</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section>
<h3>An Awesome Conclusion</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
</div>
<div class="footer">
Copyright © 2013 Awesome People, Inc.
</div>
</div>
</body>
</html>
<!-- content to be placed inside <body>…</body> -->
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment