justincharles/css-layout-floats.html

## 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>

	<!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>