Skip to content

Instantly share code, notes, and snippets.

@iruslani

iruslani/Simple htmlcss Layout

Created May 16, 2012 18:10
Show Gist options
  • Save iruslani/2712704 to your computer and use it in GitHub Desktop.
Save iruslani/2712704 to your computer and use it in GitHub Desktop.
Download ZIP
HTML/CSS layout utilizing floats and clear
Raw
Simple htmlcss Layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<!-- See http://www.alistapart.com/articles/css-floats-101/ -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Floats 101</title>
<style>
body {
margin: 0;
padding: 0;
background: #ccc;
}
#container {
width: 960px;
margin: 0 auto;
}
#header {
padding: 30px;
background: #bbb;
}
#content {
float: left;
width: 660px;
background: #fff;
}
#navigation {
float: right;
width: 300px;
background: #eee;
}
#navigation a {
display: block;
margin: 0 0 10px 0;
}
#footer {
clear: both;
background: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<p>Content Here</p>
<div id="navigation">
<a href="#">Nav Item</a>
<a href="#">Nav Item</a>
<a href="#">Nav Item</a>
<a href="#">Nav Item</a>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment