A few amends to the css:

1. Add -  overflow: hidden; to the #container css (see below). This forces the 'container' to wrap itself around the floated <divs> inside it.

.container {

width: 80%;

max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */

min-width: 780px;

background-color: #E8CCFF;

margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;

clear: right;

overflow: hidden;

}

2. Remove the border declaration from the 'sidebar1' css or comment it out (as shown below). Or make the width of the 'sidebar1' <div> less than 20%. Why, because the border width gets added to the overall width of an element. So 20% plus border and 80% width of your 'content' <div> exceed 100%.

.sidebar1 {

    float: left;

    width: 20%;

    padding-bottom: 10px;

    background-color: #636;

    color: #000;

    margin: 0px;

    /*border: thin dashed #FF0;*/

}

3. Delete or comment out clear: both; from the 'content' css (see below). Decaring it will position the 'content' <div> under 'sidebar1', which is NOT what you require.

.content {

    width: 80%;

    float: left;

    /* clear: both; */

    padding-top: 10px;

    padding-right: 0;

    padding-bottom: 10px;

    padding-left: 0;

}

Remove the first 2 css declartions from the 'footer' css, that's just complete rubbish or comment them out (as shown below). Add clear both; (as shown below). This will force the 'footer' to be postioned where you want it, after the other <divs>

.footer {

    /*position: relative;/* this gives IE6 hasLayout to properly clear */

    /* clear: none; /* this clear property forces the .container to understand where the columns end and contain them */

    background-color: #8090AB;

    border: thin dotted #FF0;

    padding-top: 10px;

    padding-right: 0;

    padding-bottom: 10px;

    padding-left: 0;

    clear: both;

}