jedmund/ethan.htm

## ethan.htm
<style type="text/css">
	body {
		width: 100%;
		padding: 0;
		margin: 0;
		}

	#container {
		width: 100%;
		float: left;
		}

	#inner {
		border: 1px solid blue;
		width: 700px;
		margin: 0 auto; /* shorthand for (top/bottom) (left/right) */
		}

	#nav_container {
		border: 1px solid red;
		width: 100%; /* Set width to 100% so that you are working with the full page width */
		float: left;
		}

	#nav_container #bar {
		background: #CCCCCC;
		width: 60%; /* This is N% of #container's width, so if you set #container to 80%, this is N% of 80%. This will scale when you resize the browser */
		height: 30px;
		float: left; /* Float left so that you can put things (an image) next to it */
		}

	#nav_container img {
		float: left; /* Float left so that you can put things (a list of links) next to it */
		border: 1px solid black; /* Remove this later, for visibility purposes */
		margin-right: 20px; /* Push the links over (spacing) */
		}

	nav ul li {
		font: 11px Helvetica;
		padding-top: 10px;
		margin-right: 10px;
		float: left; /* Float left so that the links are horizontal and not vertical */
		}
</style>

<body>
	<div id="nav_container"> <!-- Your entire top nav bar is in a container. It is not in #container so that it goes from edge to edge in the browser window. -->
		<div id="bar"></div> <!-- This bar is scalable -->
		<img src="http://placehold.it/100x30"> <!-- image goes here -->

		<nav>
			<ul> <!-- navigation links -->
				<li>Nav 1</li>
				<li>Nav 2</li>
				<li>Nav 3</li>
			</ul>
		</nav>
	</div>

	<div id="container"> <!-- you need a two-container HTML structure in order to center horizontally using floats -->
		<div id="inner">
			<p>Hello world!</p> <!-- content goes here -->
		</div>
	</div>
</body>
	<style type="text/css">
	body {
	width: 100%;
	padding: 0;
	margin: 0;
	}

	#container {
	width: 100%;
	float: left;
	}

	#inner {
	border: 1px solid blue;
	width: 700px;
	margin: 0 auto; /* shorthand for (top/bottom) (left/right) */
	}

	#nav_container {
	border: 1px solid red;
	width: 100%; /* Set width to 100% so that you are working with the full page width */
	float: left;
	}

	#nav_container #bar {
	background: #CCCCCC;
	width: 60%; /* This is N% of #container's width, so if you set #container to 80%, this is N% of 80%. This will scale when you resize the browser */
	height: 30px;
	float: left; /* Float left so that you can put things (an image) next to it */
	}

	#nav_container img {
	float: left; /* Float left so that you can put things (a list of links) next to it */
	border: 1px solid black; /* Remove this later, for visibility purposes */
	margin-right: 20px; /* Push the links over (spacing) */
	}

	nav ul li {
	font: 11px Helvetica;
	padding-top: 10px;
	margin-right: 10px;
	float: left; /* Float left so that the links are horizontal and not vertical */
	}
	</style>

	<body>
	<div id="nav_container"> <!-- Your entire top nav bar is in a container. It is not in #container so that it goes from edge to edge in the browser window. -->
	<div id="bar"></div> <!-- This bar is scalable -->
	<img src="http://placehold.it/100x30"> <!-- image goes here -->

	<nav>
	<ul> <!-- navigation links -->
	<li>Nav 1</li>
	<li>Nav 2</li>
	<li>Nav 3</li>
	</ul>
	</nav>
	</div>

	<div id="container"> <!-- you need a two-container HTML structure in order to center horizontally using floats -->
	<div id="inner">
	<p>Hello world!</p> <!-- content goes here -->
	</div>
	</div>
	</body>