Skip to content

Instantly share code, notes, and snippets.

@laurelschwulst
Created January 31, 2013 18:01
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save laurelschwulst/4684852 to your computer and use it in GitHub Desktop.
css-layout-floats.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Layout with Absolute Positioning</title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
width: 960px;
margin: 0px auto;
}
.header {
padding: 30px;
background: pink;
}
.left-column {
float: left;
width: 300px;
background: yellow;
}
.right-column {
float: right;
width: 660px;
background: lime;
}
.footer {
padding: 30px;
clear: both;
background: cyan;
}
</style>
</head>
<body>
<div id="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="left-column">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div class="right-column">
<p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
<p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
</div>
<div class="footer">
<h3>Footer</h3>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment