Content bumping other content down - html

Question

When I add content to my code, it bumps my page and footers down.I can't figure out why! When I add the smallest bit of content, it bumps a lot of my page elements down and all over the place. Any help would be appreciated. Not sure if I am posting this code correctly, please let me know if I need to do anything.
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img{
margin:0;
padding:0;
}
img, fieldset {
border:none;
}
body {
padding-top:2em;
font:normal 100%/150% "segoe ui",helvetica,sans-serif;
background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
max-width: 100%;
height: auto;
background-repeat: repeat;
color:#FFF;
}
p {
margin-top:20px;
}
#bottom {
background-image: url("http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png");
width:100%;
margin-top:20px;
position: absolute;
}
#page {
background:url('http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png');
width:100%;
min-height:1000px;
margin-top:-55px;
margin-bottom:100px;
position:absolute;
}
h1 {
position:relative;
z-index: 7;
font:bold 40px/42px arial,helvetica,sans-serif;
background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png) bottom left repeat-x;
text-align:center;
margin-top:20px;
background-image: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png), url(http://oi67.tinypic.com/33dfi86.jpg);
background-repeat: repeat-x, repeat;
background-position: bottom left, bottom left;
}
h1 a {
position:relative;
zoom:1; /* trip haslayout, fix legacy IE bugs */
display:block;
padding:30px 0;
text-transform:uppercase;
color:#FFF;
text-decoration:none;
text-shadow:
0 0 2px #000,
2px 2px 3px #754;
}
h1 span {
position:absolute;
top:50%;
left:50%;
width:402px;
height:160px;
margin:-80px 0 0 -201px;
text-indent:-999em;
background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}
h1 small {
display:block;
font:bold 16px/18px arial,helvetica,sans-serif;
}
#mainMenuCheck {
/* display none breaks this in some browsers, so just slide it out of view */
position:absolute;
left:-999em;
}
#mainMenu {
position:relative; /* depth sort over h1 */
background:#754 url(images/dots.png) top left;
padding:0.75em 0 0.75em 0.75em;
/* left margin adjusts for uneven menu width, change as needed */
text-align:center;
}
#mainMenu li {
list-style:none;
display:inline;
}
#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
text-shadow:
0 0 2px #000,
2px 2px 2px #000,
2px 2px 3px #000;
}
#mainMenu a {
display:inline-block;
vertical-align:bottom;
text-decoration:none;
color:#F0E8E0;
-webkit-transition:color 0.3s, text-shadow 0.3s;
transition:color 0.3s, text-shadow 0.3s;
}
#mainMenu a.current {
color:#87C6BC;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#87C6BC;
}
#mainMenu a:after {
display:inline-block;
padding:0 0.1em 0 0.5em;
color:#FFF;
}
#mainMenu .lastInSet a:after {
display:none;
}
#mainMenu .setBreak {
padding-right:8em;
}
#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
content:"\2605";
font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
position:absolute;
left:50%;
width:3em;
bottom:0.65em;
}
#mainMenu:after {
bottom:0.2em;
font-size:150%;
margin-left:-1.5em;
}
#mainMenu ul:before {
margin-left:-3em;
}
#media (min-width:1px) { /* sneaky trick to target just CSS3 browsers */
/*
h1 span {
background:url(images/h1Logo2x.png);
background-size:cover;
}
uncomment for 2x resolution logo support
*/
}
#media (max-width:50em) {
#mainMenu {
padding:1em 0 0.5em;
}
#mainMenu ul {
max-width:25em;
margin:0 auto;
}
#mainMenu .setBreak {
padding-right:0;
}
/*
restyle menu to 'mobile friendly' finger-sized targets
*/
#mainMenu:after,
#mainMenu a:after,
#mainMenu ul:before,
#mainMenu ul:after {
}
#mainMenu a {
padding:0.5em 1em;
margin:0 0.15em 0.5em;
background:rgba(0,0,0,0.3);
-webkit-border-radius:1em;
border-radius:1em;
}
}
#media (max-width:26em) {
body {
padding-top:0;
}
h1 {
text-align:left;
font:bold 150%/120% arial,helvetica,sans-serif;
}
h1 a {
padding:0.25em 3em 0.25em 0.25em;
}
h1 small {
font:bold 80%/120% "segoe ui",arial,helvetica,sans-serif;
padding-bottom:15px;
}
h1 span,
#mainMenu:before {
display:none;
}
#mainMenuCheck + label {
position:absolute;
z-index:99;
right:0.25em;
top:0.3em;
width:3em;
padding:0.5em 0;
background:#488;
border:0.25em solid #FFF;
-webkit-border-radius:0.75em;
border-radius:0.75em;
display:none;
}
#mainMenuCheck + label:hover {
background:#6BB;
display: none;
}
#mainMenuCheck + label:before,
#mainMenuCheck + label:after {
content:"";
display:block;
height:0.5em;
margin:0 0.5em;
border:solid #FFF;
border-width:0.25em 0;
}
#mainMenuCheck + label:after {
border-width:0 0 0.25em;
}
#mainMenu {
display:none;
padding:0.5em 0.5em 0;
}
#mainMenuCheck:checked ~ #mainMenu {
display:block;
}
}
/**MENU**/
#media (min-width:52em) {
.header {
display: none;
}
.menu {
display: none;
}
}
#media (max-width:52em) {
body {
z-index: 100;
margin:;
font-family: font:bold 16px/18px arial,helvetica,sans-serif;
background-color: #f4f4f4;
}
a {
color: #F8F4E6;
text-shadow:
0 0 5px #000,
5px 5px 5px #754;
}
.menu a:before,
.menu ul:before,
.menu ul:before {
content:"\2605";
}
/* header */
.header {
background-color:#6A4E39;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-image:none;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color:#4EB4AC;
}
.header .logo {
display: block;
float: left;
font-size: 15px;
padding: 10px 20px;
margin-top: 5px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #F8F4E6;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #F8F4E6;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: none;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
}
/* 48em = 768px */
#media (min-width: 52em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
#media (max-width: 52em) {
#mainMenu {
display: none;
justify-content: center;
}
/* section */
.section {
overflow: hidden;
margin: auto;
max-width: 1400px;
}
.section a {
position: relative;
float: left;
width: 100%;
}
.section a img {
width: 100%;
display: block;
}
.section a span {
color: #fff;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 2em;
text-shadow: 1px 1px 0 #000;
}
.section-split a span {
display: none;
}
.section-split a:hover span {
display: block;
}
/* 48em = 768px */
#media (min-width: 48em) {
.section-split a {
width: 50%;
}
}
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<link rel="stylesheet" href="screen.css" media="screen,projection,tv">
<title>Sandmann Farm</title>
</head>
<body>
<h1>
<a href="/">
Sandmann Farm
<span>-</span>
<small>EST. 1975</small>
</a>
</h1>
<!--Menu -->
<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<div id="mainMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>What We Do</li>
<li class="lastInSet setBreak">Events</li>
<li>Success Stories</li>
<li>Contact</li>
<li>Events</li>
<li class="lastInSet">Blog</li>
</ul>
<!-- #mainMenu --></div>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header">
Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li> Home</li>
<li> About</li>
<li> What We Do</li>
<li> Success Stories</li>
<li> Contact</li>
<li> Events</li>
<li> Blog</li>
</ul>
</header>
<!-- Page -->
<div id="page"></div>
<h1>Hello World!</h1>
<!--Header -->
<div id="sawtoothb"></div>
<div style="height: 100px; background-image:url('http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png'); background-repeat:repeat-x; margin-top: -110px;">
</div>
<!--Footer -->
<div id="footer"></div>
<div id="bottom"></div>
<div></div>
<div style="height: 100px; background-image:url('http://oi66.tinypic.com/2ufrt77.jpg'); background-repeat:repeat-x; margin-top: -40px;margin-bottom:25px;">
</div>
</body></html>

Answer 1

Nothing is being bumped down, you #page just has a huge min-height. Setting min-height will mean that whatever you define, in your case min-height:1000px that will be the mininum height of that element, it will never be smaller than 1000px, no matter what.
You can find this declaration here:
#page {
background:url('http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png');
width:100%;
min-height:1000px;
margin-top:-55px;
margin-bottom:100px;
position:absolute;
}
Just remove the min-height:1000px, I added this JSFiddle to show you the result as well.