Hello all,

I have coded a page with three floats at the top (all floating left - which look fine: text box, earth and two icons on the right)

I cannot figure out why the bottom two icons (in a separate left floated div) jumps to the bottom:
URL:http://amdesigngroup.com/Parker/Water/


CSS:

@charset "UTF-8";
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #666; }

/*START Text Formatting*/
h1 {color: #002157;margin:1.5em 0 .3em 0;}
h2 { font-weight: normal; font-size: 1.6em; margin: 0 0 .5em; color: #000; border-bottom: 1px solid #D6D6D6; padding-bottom: .25em; }
h3 { font-size: 1.4em; margin: 0 0 .1em; font-weight: normal; color: #000; }
p { line-height: 1.39em; }
h4 { font-size: 1.1em; color: #000000; font-weight: normal; margin-left: .25em; }
h5 { font-size: 1em; color: #cc9900; font-weight: bold; margin-left: .25em; margin-top: 0; margin-bottom: .5em; }
h6 { font-size: 1.1em; clear: both; background-color: #FBE09E; padding: .5em .5em; font-weight: normal; margin-top: 1em; margin-bottom: 0.75em; color: #666; } 
/*END Text Formatting*/

/*START Image and Link Formatting*/
a img { border: 0; }
img { _margin-bottom: -3px; }
a { color: #369; }
a:link { color: #369; }
a:visited { color: #369; }
a:hover { color: #121D4D; text-decoration: none; }
a:active { color: #000; }
p { margin: 0 .25em 1em; }
/*END Image and Link Formatting*/

/*ClearFix: The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;clear: left;}
/* END hide from IE-mac */

/* START Container: The outside box that holds in everything */
#container {
    position:relative;/*You must make the container a relative position in order for the absolute links in the interior to function.*/
    border-left: 1px solid #fff; \width: 774px; w\idth: 773px;
    margin: 25px auto; /* the auto margins (in conjunction with a width) center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
}
/* END Container */

/* START Header */
#header { margin-top: 5px;height:50px;}
#logo { float:left; width:107px; margin:0 0 15px 0;}
#tagline { float:right; width:412px; margin:15px 0 0 0;}
.yellowBar {width: 100%; height: 14px; background-color: #feb421; outline-color: #feb421; outline-style: solid; outline-width: 1px;}
.yellowBarbttm {width: 100%; height: 14px; background-color: #feb421; outline-color: #feb421; outline-style: solid; outline-width: 1px;margin:40px 0 0 0;}
/* END Header */

/* START MainContent */
#mainContent {
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background: #FFFFFF;
}
/* END MainContent: all the content underneath the header */


/* START upper left text - floated left*/
#upperLeft {
    float:left;
    width:280px;/* All floats must have a width */
}
/* END upper left text */

/* START middleEarth image box - floated left*/
#middleEarth {
    margin-left:21px;/* Give some room between the boxes */
    float:left;
    width:206px;/* All floats must have a width */
}
#earthDrop{
    float:left;
    width:200px;/* All floats must have a width */
    }
/* END middleEarth box */

/* START upper right Icon Box */
#iconBox{
    float:left;
    width:190px;/* All floats must have a width */
    margin:0 0 0 35px;
    }

.iconText {
color:#000;    
}
    
ul {
margin:.5em 0 1em 0;
padding:0;
list-style-type:none;
}

/* Put a right hand margin to push the list text underneath, otherwise it will wrap*/
#iconBox img {
margin:0 60px 0 0;    
}

/* START all the right-side image boxes - all floated left*/
/* Check Source code for location*/
#lifeSci{
    float:left;
    width:181px;/* All floats must have a width */
    clear:right;
    }
#indProcess{
    float:left;
    width:181px;/* All floats must have a width */
    clear:right;
    margin:15px 0 0 0;/* give some space above */
    }
/* END all the upper right image boxes - all floated left*/
/* END Icon Box */


/* START the bottom icon box - absolute positioned*/
/* Check Source code for location*/

#bttmIcons {
    float:left;
    top:500px;
    width:500px;/* All floats must have a width */
    }

#deSal{
    float:left;
    width:190px;/* All floats must have a width */
    clear:right;
    margin:0 0 0 40px;
        }
#drinkFood{
    float:left;
    width:181px;/* All floats must have a width */
    clear:right;
    margin:0 0 0 60px;
    }

/* END all the bottom icon boxes*/

/* START Footer */
#footer {
    
    padding: 0 10px;
    background:#fff;
}
#footer p {
    margin: 0;
    padding: 10px 0;
}
/* END Footer */

nevermind. figured it out.