CSS Float Property - Float-based Layouts

Here's a simple example how you could use the CSS float property to build a simple two-column layout. 

<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="Here, you'll learn what is meant by shrink wrap when elements are floated">
<style>
	header {
		border-bottom: 1px solid black; 
		padding: 20px; 
	}
	footer {
		border-top: 1px solid black; 
		padding: 20px; 
	}
	nav {
		float: left; 
		width: 110px; 
		padding: 20px; 
	}
	main {
		margin-left: 150px; 
	}
</style>
</head>

<body>
	<header>
		<h1>Site Title - Header</h1>
		<p>Slogan Text</p>
	</header>
	
	<nav>
		<h2>Navigation Menu</h2>
		<ul>
			<li><a href="#" title="title-1">Button-1</a></li>
			<li><a href="#" title="title-2">Button-2</a></li>
			<li><a href="#" title="title-3">Button-3</a></li>
			<li><a href="#" title="title-4">Button-4</a></li>
		</ul>
	</nav>
	
	<main>
		<h2>Content Area</h2>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</main>
	
	<footer>
		<h2>Footer</h2>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
	</footer>
</body>

</html>

Here's a few important points about this layout: 

  • "nav" has been floated to left and has a fixed width and some margin-right and some margin-left. 
  • "main" has been given a margin-left of the same size as the width of "nav" + margin-right of "nav" + margin-left of "nav"
  • and that's how we have the vertical navigation menu and the content area each as a column sitting next to each other.