Hi,
I can't figure out why the container widths don't work. Also spacing of column widths is off.
I just found out that this was due yesterday! YIKES. I really need help ASAP please.

CODE
/* Universal style rule */
*{
/* Block all browser default margins and padding */
  margin: 0;
  padding: 0;
}

body {
    background:#ccf url(art/cyprbk_pattern.jpg); /* same bkgrd pattern as HSF */
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#000;
}

#wrapper{
    width:740px;
    /* background-color:#fff; */
    margin:20px auto; /* centered horizontally */
}


/***** major layout divisions ****/
#branding{
    height:52px;
    background-color:#339; /*matches col1 bkgrd color -- HSF blue */
}


/*this goes directly under branding bar and above column 1 */
#bluebar{
    /* height:0.625em;  --don't use height and width BOTH so that layout is elastic */
    width:16%;
    font-size:0.667em; /* 8 points */      
    background-color:#339; /* matches col1 bkgrd color -- HSF blue */
    clear:both;
    float:left;
}

/*this goes directly under branding bar and above columns 2,3,4  */
#greenbar{
    /* height:0.625em;  --don't use height and width BOTH so that layout is elastic */
    margin-left:16%;  /* margin width must match left column's (bluebar's) width */
    width:84%;  
    font-size:0.667em; /* 8 points */
    background-color:#696; /* matches col2 bkgrd color -- green */
}




/** CLICK HERE text - goes under Suggest Someone button **/
.click{
    float:right;
    margin-right:7em;
    font-size:0.75em; /* 9 points */
    text-align:center;
}



/**** TEXT ****/

.grntext{    /* columns 1 AND 5 */
    font-family:'Times New Roman', Times, serif;
    font-size:9pt;
    line-height:14pt;
    color:#9c9;
    width:16%;
    text-align:center;
}

.whitetext{    /* columns 1 AND 5 */
    font-family:'Times New Roman', Times, serif;
    font-weight:normal;
    font-size:9pt;
    line-height:11pt; /* leading */
    color:#fff;
    width:16%;
    text-align:center;
}

.caption{ /* columns 2 AND 4 */
    font-size:7pt; /* 0.625em = 7.5 points */
    color:#000;
    text-align:left;
    text-decoration:none;
    clear:both;
}


/* main body copy in column 3 -- styled same in fame3.html */
p.main{
    font-family:Verdana, Arial, sans-serif;
    font-size:11pt;
    line-height:14pt;
    text-align:left;
    padding-top:12px;
    padding-bottom:12px;    
}


/***** end TEXT *****/




/***** FOOTER section *****/
#footer {
    clear:both;
    float:left;
    width:100%;
}
#footer p {
    margin-top:10px;
    margin-left:2%;
    padding-right:2%;
    font-size:8pt;
    text-align:center;
}
/*** end of footer section ***/


a {text-decoration:none}



/***** START OF 5 COLUMNS SETUP ******/

#container5 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background:#339; /* column 5 blue */
}
#container4 {
    clear:left;
    float:left;
    width:100%;
    position:relative;
    right:16%;
    background:#696; /* column 4 grn */
}
#container3 {
    clear:left;
    float:left;
    width:100%;
    position:relative;
    right:16%;
    background:#fff; /* column 3 white */
}
#container2 {
    clear:left;
    float:left;
    width:100%;
    position:relative;
    right:34%;
    background:#696; /* column 2 grn */
}
#container1 {
    float:left;
    width:100%;
    position:relative;
    right:16%;
    background:#339; /* column 1 blue */
}

#col1 {
    float:left;
    width:14%;
    position:relative;
    left:83%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:14%; /* changed column gap from 4% total to 2% total */  
    position:relative;
    left:85%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:34%;  
    position:relative;
    left:87%;
    padding-top:12px;
    padding-bottom:12px;    
    overflow:hidden;
}
#col4 {
    float:left;
    width:14%;  
    position:relative;
    left:89%;
    overflow:hidden;
}
#col5 {
    float:left;
    width:14%;  
    position:relative;
    left:91%;
    overflow:hidden;
}


And here is the HTML FILE:
or if you prefer the URL link:http://www.frankfordhistoricalsociety.org/fame1_2012r4.html
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Northeast Philadelphia Hall of Fame</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="description" content="4 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
    <meta name="keywords" content="4 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
    <meta name="robots" content="index, follow" />
    <!-- this was in original file:    
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <style media="screen" type="text/css">
     -->
    <link href="HOFstyles2012TEST.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<div id="branding">
    <a name="top"></a>
    <img src="art/NEHF-upleft.gif" alt="Northeast Philadelphia Hall of Fame"
    style="height:100%; float:left;" />
        <a href="fame2.html"><img src="art/suggest_button_SM.gif" alt="Click here to suggest someone"
        style="height:93%; border:none; float:right; margin-top:3px; margin-right:7em;"
        title="Click here to suggest someone" /></a>
</div>

<div id="bluebar">
 
</div>

<div id="greenbar">
 
</div>

<div id="container5">
    <div id="container4">
        <div id="container3">
            <div id="container2">
                <div id="container1">


                    <div id="col1"><!-- Column 1 -->
                        <br />
                        <p class="grntext">
                            Sponsored by</p>
                                <p> </p>
                                    <p class="whitetext">
                                    Mayfair Community Development Corporation</p>
                                <p> </p>
                        <p class="grntext">
                            in partnership with</p>
                                <p> </p>
                                    <p class="whitetext">
                                    Holy Family University<br />
                                    <br />
                                    Historical Society of Frankford<br />
                                      <br />
                                    The Northeast Times</p>
                                <p> </p>
                        <p class="grntext">
                              and</p>
                                <p> </p>
                                    <p class="whitetext">
                                    Philadelphia City Councilman <nobr>At-Large</nobr><br />
                                    Dennis M. O’Brien</p>
                    </div><!-- END Column 1 -->


                    <div id="col2"><!-- 2009 portraits column -->
                          <p class="caption">
                            <strong>2009 Inductees</strong><br />
                                <br />
                                    Click on image for inductee profile<br />
                        </p>
                            <br />

                        <!-- 1ST PORTRAIT -->
                        <p class="caption">
                            Thomas Holme<br />
                                <a href="fame3.html#holme">
                                        <img src="/portraits/holmemap_sm.jpg" width="80px" border="0" alt="Thomas Holme Map" title="click here for profile" /></a>
                        </p>
                            <br />


                        <!-- 2ND PORTRAIT -->
                        <p class="caption">
                            Henry and Mary Disston<br />
                                <a href="fame3.html#disston">
                                    <img src="/portraits/mh_disston_sm.jpg" width="80px" border="0" alt="Henry and Mary Disston" title="click here for profile" /></a>
                        </p>
                            <br />


                        <!-- 3RD PORTRAIT -->
                        <p class="caption">
                            Katharine Drexel<br />
                                <a href="fame3.html#drexel">
                                    <img src="portraits/KatharineDrexel.gif" width="75px" border="0" alt="Katharine Drexel" title="click here for profile"/></a>
                           </p>
                            <br />


                        <!-- 4TH PORTRAIT -->
                        <p class="caption">
                             Tom Gola<br />
                                <a href="fame3.html#gola">
                                    <img src="/portraits/gola_sm.jpg" width="75px" border="0" alt="Tom Gola" title="click here for profile"/></a>
                        </p>
                            <br />


                        <!-- 5TH PORTRAIT -->
                        <p class="caption">
                            Joan Krajewski<br />
                                <a href="fame3.html#kraj">
                                    <img src="/portraits/kraj_sm.jpg" width="75px" border="0" alt="Joan Krajewski" title="click here for profile"/> </a>
                        </p>
                            <br />

                        <!-- 6TH PORTRAIT -->
                        <p class="caption">
                               Harry C. Silcox<br />
                                <a href="fame3.html#silcox">
                                    <img src="/portraits/hsilcox_sm.jpg" width="75px" border="0" alt="Harry Silcox" title="click here for profile"/></a>
                        </p>
                            <br />

                        <!-- 7TH PORTRAIT -->
                        <p class="caption">
                            Aid for Friends<br />
                                <a href="fame3.html#aid">    
                                <img src="/portraits/aid_sm.jpg" width="75px" border="0" alt="Aid for Friends" title="click here for profile" /></a>
                        </p>
                            <br />
                            <br />
                </div><!-- END Column 2 -->

                <div id="col3">
                    <p>Often called “the Great Northeast,” ... who have lived and worked here over the years.<br />
                    <br />
                    The Northeast Philadelphia Hall of Fame, sponsored by Mayfair Community Development Corporation in partnership with Holy Family University, Historical Society of Frankford, The Northeast Times and Philadelphia City Councilman At-Large Dennis M. O’Brien</p>
                <p> </p>
                    <img src="art/HoFlogo.gif" alt="Hall of Fame" width="90%" />
                </div><!-- END Column 3 -->


                <div id="col4"><!-- 2010 portraits column -->
                      <p class="caption"><strong>2010 Inductees</strong><br /><br />
                                Click on image for inductee profile<br />
                    </p>
                        <br />

                            <!-- 1ST PORTRAIT -->
                                <p class="caption">
                                Txxx Hxxx<br />
                                    <a href="fame3.html#holme">
                                    <img src="/portraits/holmemap_sm.jpg" width="80px" border="0" alt="Thomas Holme Map" title="click here for profile" /></a>
                                    </p>
                                <br />
                </div><!-- END Column 4 -->


                <div id="col5">
                    <p class="whitetext">2012 Inductees To Be Announced.</p>
                        <br />
                    <p class="grntext">Vote for your favorite person or organization by April 1, 2012.</p>
                </div><!-- END Column 5 -->



                </div><!-- end container 5-->    
            </div><!-- end container 4 -->
        </div><!-- end container 3 -->
    </div><!-- end container 2 -->
</div><!-- end container 1 -->

<div id="footer">
    <p>
        <a href="fame2.html">How Do I Suggest Someone?</a><br />
            <br />
        <a href="fame1.html">NE Philadelphia Hall of Fame</a>
            |   

         <a href="fame3.html">2009 Inductee Profiles</a>
            |   

         <a href="fame3.html">2010 Inductee Profiles</a>
            |   

        <a href="index.html">Historical Society of Frankford</a><br />
            <br />

          <a href="#top">Return to Top</a>  
    </p>
        <br />
            <br />

</div><!-- end footer -->

</div><!-- end of wrapper -->
  
</body>
</html>



Also, here is a pic of the problem. The blue lines show where the container widths should be.
IPB Image