Untitled

HTML:


<head>
BLA BLA
</head>

<body>
<div class="wrapper">
<div class="page">
<header>
<div class="banner">BANNER STUFF</div>
<nav>
NAV STUFF
</nav>
</header>

<div class="content">
LOTS OF CONTENT (THE TEXT YOU SEE ON PINK)
</div>

<div class="sidebar">
THE SIDE BAR
</div>

<footer>
FOOTER STUFF
</footer>

</div>
</div>
</body>


CSS:


@charset "UTF-8";

header {
unimportant
}

.banner:hover {
unimportant
}


ul.horizontal { /* Navigation Whole */
unimportant
}


ul.horizontal li { /* Navigation Buttons */
unimportant
}


a.fill { /* Turns Entire Button Into Link */
unimportant
}


.sidebar {
unimportant
}


.content {     /* THIS IS THE PINK TEXT */
		width: 670px;
		height: auto;
		margin: 86px 0px 0px -2px;
		color: #000;
		background-color: pink;
		float: left;
}


.content hr {
unimportant stuff for a <hr>
}


footer {       /* THIS IS THE MISPLACED FOOTER */
		width: 980px;
		height: 40px;
		margin-top: 44px;
		position: relative;

		right: 2px;  /* This fixes alignment due to border */
		border: 2px solid;
		border-color: #000000;


                     /* RANDOM FONT CRAP */
		font-size: 0.85em;
		color: #FFFFFF;
		text-align: center;
		line-height: 40px;
		font-family: Arial;

}


	.wrapper {   /* the overall border */
		max-width: 980px;
		min-width: 980px;
		min-height: auto;
		border: 3px solid;
		border-color: #000000;
		margin: 10px auto 0px auto;
		padding: 10px 12px 10px 12px;
	}


	.page {
		min-height: auto;
		min-width: 980px;
		margin: 0px auto 0px auto;
		position: relative;
		background-color: #fff;
		display:
}