Float not being cleared-- why not?

Question

On the webpage http://amethystartworks.com/ I am trying to get the container div <div id="header_again"> to expand to the height of the div inside it: <div id="left"> . I have inserted a spacer div <div class="spacer"> </div> immediately after <div id="left"> but this is not working.  The css is as follows:  Thanks in advance for any help.
@charset "UTF-8";
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #002B54;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #151515;
.oneColFixCtrHdr #container {
    width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #DFDEE9;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left;
.oneColFixCtrHdr #header {
    background: #DFDEE9;
    padding: 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    background-image: url(/images/header3_01.gif);
    background-repeat:no-repeat;
    height: 114px;
    margin-bottom: 0px;
.oneColFixCtrHdr #header_again {
    background: #DFDEE9;
    padding: 35px 0px 0px 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    background-image: url(/images/header3_02.gif);
    background-repeat:no-repeat;
    height: 299px;
    margin-top: 0px;
.oneColFixCtrHdr #header_again p {
    font-family:Arial, Helvetica, sans-serif;
    line-height: 200%;
    color:#151515;
    font-size:14px;
.image_float {
    float:left;
    margin-right:5px;
.oneColFixCtrHdr #header_again ul {
    list-style: none;
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
.oneColFixCtrHdr #far_left {
    float:left;
    width: 150px;
    padding: 10px;
    margin-left: 25px;
    border: none;
    background-image: url(/images/box_grad.gif);
    background-repeat: no-repeat;
.oneColFixCtrHdr #left {
    float:right;
    width: 275px;
    padding: 10px;
    margin-right: 260px;
    border: none;
    background-image: url(/images/box_grad2.gif);
    background-repeat: no-repeat;
.oneColFixCtrHdr #left h6 {
    font-family:Arial, Helvetica, sans-serif;
    line-height: 150%;
    color:#151515;
    font-size:12px;
.spacer {
    clear:right;

Answer 1

I think what you really want is Equal height CSS columns.  I'm afraid CSS doesn't naturally work the way table columns do.  But you'll find some solutions described in this discussion from yesterday:
http://forums.adobe.com/message/2988164#2988164
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb