CSS spacing issue

I have been working on this for hours. There is a 600-800px space added to the bottom of my page that is unnecessary. I have added a 1px border to all elements to see where the issue is and it looks like my elements are leaving instances behind in their original static positions. I cannot figure out how to fix this.

Any assistance is greatly appreciated.

In addition to the code below I am using bootstrap.css, boilerplate.css and respond.min.js

All the CSS being used in the code below is near the bottom. I have not started layout for additional screen sizes.

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="CSS.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>

<body>
<div class="gridContainer clearfix">
  <header class="fluid logo"><img src="images/vativeLogoWhiteSlogan(WEB).png" alt="Trinnovative, LLC Logo"/></header>
    <section class="shadow">
      <section class="container">
      <section class="fluid tile1" id="square">Business Landing</section>
      <section class="fluid tile2" id="square">Personal Landing</section>
      <section class="fluid tile3" id="tron">Call to Action</section>
      <section class="fluid tile4" id="square">Social Media</section>
      <section class="fluid tile5" id="square">Connect</section>
      <section class="fluid tile6" id="bar">About Us</section>
      <footer class="fluid footer tile7" id="bar1">
        <p>Copyright &copy; 2014 <a href="http://www.trinnovative.com">Trinnovative LLC</a>. All rights reserved. | <a href="#">Terms of Use</a> | <a href="#">Privacy Policy</a></p>
    </footer>
    </section>
  </section>
</div>
</body>
</html>

@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	/* [disabled]margin-left: 0px; */
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
}

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	clear: none;
	float: none;
}
#div1 {
}
.tile {
}
.logo {
}
.footer {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.tile {
}
.logo {
}
.footer {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
* {
	border: 1px solid #fff;
}

body {
	background-color:#000;
}

.gridContainer {
	width: 88.5%;
	max-width: 1200px;
	max-height: 1200px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	clear: none;
	float: none;
	margin: 0px auto;
}
.container {
	clear:both;
	position: relative;
	display: block;
	width: 880px;
	height: 740px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
	background-color: #333;
	border-top-left-radius: 60px;
	border-bottom-right-radius: 60px;
}
.shadow {
	clear:both;
	position: relative;
	display: block;
	height: 740px;
	width: 920px;
	background-color:#300;
	border-top-left-radius: 60px;
	border-bottom-right-radius: 60px;
	opacity: 50%;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
}
.logo {
	margin-top: 40px;
	margin-bottom: 20px;
}

.tile1 {
	top: 20px;
	left: 5px;
	border-top-left-radius: 40px;
}

.tile2 {
	top: 40px;
	left: 5px;
}

.tile3 {
	top: -380px;
	left: 225px;
}

.tile4 {
	top: -800px;
	left: 645px;
}

.tile5 {
	top: -780px;
	left: 645px;
}

.tile6 {
	top: -760px;
	left: 5px;
}

.tile7 {
	top: -740px;
	left: 5px;
	border-bottom-right-radius: 40px;
}

#square {
	position: relative;
	height: 200px;
	width: 200px;
	background-color:#C00;
}

#bar {
	position: relative;
	background-color: #C00;
	height: 200px;
	width: 840px;
}

#bar1 {
	position: relative;
	background-color: #C00;
	height: 40px;
	width: 840px;
}

#tron {
	position: relative;
	background-color: #C00;
	height: 420px;
	width: 400px;
}

.logo img{
	display: block;
	width: 600px;
	margin: auto;
}

.footer {
	margin: auto;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.footer p{
	disply: block;
	margin: auto;
	width: 800px;
	color: #990000;
	text-decoration: none;
	text-align: center;
	font-size: small;
}

a {
	text-decoration:none;
	color: #fff;
}

a.hover {
	text-decoration: none;
	color:#990000;
}

a.visited {
	text-decoration: none;
	color: #fff;
}
	
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}

Hi, brysoncreighton. Welcome to the forums.

You have committed a common newbie mistake. You have used {position:relative} to position the boxes on your page. {position:relative} moves the appearance of the box on the page but does not move the space occupied by it originally. To demonstrate this effect, comment out the styles .tile1 through .tile7 (the positioning coordinates) and reload the page. You will see that the boxes flow along the left edge of the page to the exact height that includes that mysterious excess space.

Most of the containers on this test example have fixed heights and widths. That plus the relative positioning allows them to form a pretty picture that is entirely unnatural and unworkable on a real page.

The correct way to layout a page is to allow the content to dictate the height of its container(s) and use other techniques to position those containers as needed.

You probably do not need .gridContainer {max-height:1200px} either. Fixed heights are best reserved for items with fixed dimensions such as images… not text content.

Ditch the relative positioning and learn about workable layout techniques:
floats, display-table and columns, blocks and inline-blocks, and more; and percent widths vs. fixed widths.

I’m reluctant to offer some example code today because I do not do grids. I would urge you to hand code your page without a grid while learning HTML and CSS layout techniques because you will get a much better grasp of how the elements work.

ronpat,

Thank you for clarifying and validating my previous thought. I wasn’t sure if there where other pieces involved as this is my first time laying out a site like this. I am familiar with the other methods but for some reason this one threw me for a loop… prime example of trying something new!

This thread can be closed.