I'm new to website design, so please be gentle. I'm trying to design a fairly simplistic page in which every element follows the previous -- no floats, no absolute positioning, and no sticky footer. Essentially, I just want the footer to appear at the end of the page (instead of the bottom of the screen), when it's now appearing in the middle of another element. And I can't figure out what I'm doing wrong despite extensive searching and reading...
Here's my CSS:
header, footer, nav, div.main {
display: block;
}
header {
width: 940px;
height: 150px;
margin: 0 auto;
margin-top: -56px;
border: 0;
padding: 0;
}
nav {
margin: 0 auto;
width:940px;
height:40px;
background:#0F6B8F;
overflow:hidden;
}
nav ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
text-align:center;
}
nav ul li {
display:block;
float:left;
list-style:none;
margin:0;
margin-top: -5px;
padding:0;
position:relative;
color:#C2D6DD;
font-family: sans-serif;
font-size: 1.8em;
}
nav ul li a {
display:block;
margin:0 0 0 1px;
padding-left: 10px;
padding-right: 10px;
background:#0F6B8F;
color:#C2D6DD;
text-decoration:none;
line-height:1.8em;
}
nav ul li a:hover {
background:#0F6B8F;
color:#ED7312;
}
a.navlink {
color: #C2D6DD;
}
a:link.navlink {
color: #C2D6DD;
}
a:visited.navlink {
color: #C2D6DD;
}
a:hover.navlink {
color: #ED7312;
}
div.main {
min-height: 500px;
width: 940px;
margin: 0 auto;
border: 0;
padding: 0;
}
div.wrapper {
width: 920px;
margin: 0 auto;
border: 0;
padding: 0 0 0 20px;
}
.splitleft {
float: left;
width: 460px;
margin: 0 auto;
border: 0;
}
.splitright {
float: right;
width: 460px;
margin: 0 auto;
border: 0;
}
footer {
margin: 0 auto;
width: 940px;
height: 60px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #0F6B8F;
position: relative;
padding: 20px 0 0 0;
display: block;
}
/* TABLE STYLING SECTION */
table {
padding: 0 0 10px 20px;
font-family: 'Lato', sans-serif;
font-size: 0.8em;
border-spacing: 15px;
}
table.border {
padding: 0 0 10px 20px;
font-family: 'Lato', sans-serif;
font-size: 0.8em;
border-spacing: 0;
border-collapse: collapse;
border-bottom: 2px solid #000000;
}
tr.fifth:nth-of-type(5n+1) {
border-bottom: 1px solid #000000;
}
.colwide {
width: 180px;
}
.colmed {
width: 120px;
}
.colthin {
width: 60px;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
th.border {
border-bottom: 2px solid #000000;
font-weight: bold;
padding: 5px 5px 5px 5px;
}
td.LftLightRtLight {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding: 5px 5px 5px 5px;
}
td.LftHeavyRtLight {
border-left: 2px solid #000000;
border-right: 1px solid #000000;
padding: 5px 5px 5px 5px;
}
td.LftLightRtHeavy {
border-left: 1px solid #000000;
border-right: 2px solid #000000;
padding: 5px 5px 5px 5px;
}
/* TEXT STYLING SECTION */
h3 {
color: #ED7312;
font-size: 2.5em;
font-family: sans-serif;
margin: 0 auto;
border: 0;
padding: 0 0 10px 0;
}
h4 {
color: #0F6B8F;
font-size: 1.8em;
font-family: sans-serif;
margin: 0 auto;
border: 0;
padding: 0 0 10px 0;
}
h5 {
color: #ED7312;
font-size: 1.4em;
font-family: sans-serif;
margin: 0 auto;
border: 0;
padding: 0 0 10px 0;
}
p#Title {
color: #ED7312;
font-family: sans-serif;
font-size: 3.5em;
text-align: right;
margin-bottom: -0.5em;
border: 0;
padding-top: 0;
padding-bottom: 0;
padding-right: 40px;
}
p#Byline {
color: #4EC8F8;
font-family: sans-serif;
font-style: italic;
font-size: 1.8em;
margin: 0;
border: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 40px;
}
p#Welcome {
font-family: sans-serif;
font-size: 0.8em;
font-weight: bold;
margin: 0;
border: 0;
padding: 25px 0 10px 0;
}
p#AddSection {
font-family: sans-serif;
font-size: 1em;
font-weight: bold;
margin: 0;
border: 0;
padding: 0 0 20px 60px;
}
p#Footer {
font-family: sans-serif;
font-size: 0.75em;
margin: 0;
border: 0;
padding-top: 5px;
padding-bottom: 20px;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #ED7312;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
And here's my HTML (I'm trying to use only HTML 5):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyWebsite: Overview</title>
<meta name="description" content="MyWebsite: Overview">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<p id='Title'>MyWebsite</p>
<p id='Byline'>Where you can dump all your crap!</h2>
</header>
<nav>
<ul>
<li><a class='navlink' href="/myhome.html">MyHome</a></li>
<li><a class='navlink' href="/myinfo.html">MyInfo</a></li>
<li><a class='navlink' href="/support.html">Support</a></li>
<li><a class='navlink' href="/shop.html">Shop</a></li>
</ul>
</nav>
<div class="main">
<p id='Welcome'>Welcome <a href="/myhome.html">User Name</a>! You have access to the following:</p>
<h3>Subject</h3>
<div class="wrapper">
<h4>Year</h4>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
</tr>
<tr>
<td class='center'>04/14/2014</td>
<td class='center'>C</td>
<td class='center'>6</td>
<td class='center'>Full</td>
<td class='center'>In progress</td>
<td class='center'><a href=#>Grid</a></td>
<td class='center'><a href=#>New</a></td>
<td class='center'><a href=#>Edit</a></td>
<td class='center' class='heavy'><a href=#>Submit</a></td>
</tr>
</table>
<h5>Overall Performance</h5>
<table class='border'>
<tr class='fifth'>
<th class='border colwide'>Person</th>
<th class='border colthin'>Thing 1</th>
<th class='border colthin'>Thing 2</th>
<th class='border colthin'>Thing 3</th>
<th class='border colthin'>Thing 4</th>
<th class='border colthin'>Thing 5</th>
<th class='border colthin'>Thing 6</th>
<th class='border colthin'>Thing 7</th>
<th class='border colthin'>Thing 8</th>
<th class='border colthin'>Thing 9</th>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>JF</td>
<td class='LftHeavyRtLight colthin center'>38</td>
<td class='LftLightRtHeavy colthin center'>46.63</td>
<td class='LftHeavyRtLight colthin center'>6</td>
<td class='LftLightRtLight colthin center'>6</td>
<td class='LftLightRtHeavy colthin center'>5</td>
<td class='LftHeavyRtLight colthin center'>17</td>
<td class='LftLightRtHeavy colthin center'>51.95</td>
<td class='LftHeavyRtLight colthin center'>98.58</td>
<td class='LftLightRtHeavy colthin center'>4</td>
</tr>
</table>
</div>
<div class="wrapper">
<div class="splitleft">
<h5>Performance</h5>
<table class='border'>
<tr class='fifth'>
<th class='border colwide'>Attribute 1</th>
<th class='border colthin'># poss</th>
<th class='border colthin'>percent</th>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
<tr class='fifth'>
<td class='LftHeavyRtLight colwide left'>a/r</td>
<td class='LftLightRtLight colthin center'>3</td>
<td class='LftLightRtHeavy colthin center'>63%</td>
</tr>
</div>
</div>
</div>
<footer>
<p id='Footer'>© 2013 MyWebsite</p>
<p id='Footer'>* Howdy is a registered trademark of Howdy Doody, which was not involved in the production of, and does not endorse this product.</p>
</footer>
</body>
</html>
I created this jsfiddle, which shows the problem:
Any help is very much appreciated! I'm betting the solution is something incredibly dumb that I've overlooked...
Thanks in advance!
P.S. If you see any other screwy aspects of my code, I'm VERY open to hearing your thoughts!
You didn't close the tabletag for the last table of the page. Instead, you closed a div.
You'll also notice that, since your splitleftelement is floated, the wrapperelement has no height.
You can add overflow:auto to the wrapper class, or, in a better way, yet not compatible with every IE version, add this to your css :
.wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}