Margin between div's when no border present?

1

Hey Hey -

I’m dead stuck trying to figure out how to get rid of the space/margins between my 3 div’s. I can get the space to disappear with a border, but that gets in the way of the visual image I’m trying to create.

Any help? Thanks!!

This is my CSS:


@charset "UTF-8";
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}

.oneColFixCtrHdr #container {
    width: 1024px;
    background: #FFFFFF;
    margin: 0 auto;
    text-align: left;
}

.oneColFixCtrHdr #header {
    background: #DDDDDD;
    background-image:url(images/historic_FIBARk_whitewater_festival_header_bg.jpg);
    background-repeat:no-repeat;
    height:132px;
}

.oneColFixCtrHdr #header h1 {
    margin: 0;
}

.oneColFixCtrHdr #mainContent {
    padding: 0 20px;
    background: #FFFFFF;
    background-image:url(images/salida_whitewater_festival_background_image.jpg);
    background-repeat:no-repeat;
    border-top: 1px solid #f00;
    border-bottom: 1px solid #f00;
}

.oneColFixCtrHdr #footer {
    height:135px;
    background:#DDDDDD;
    background-image: url(images/fibark_first_in_boating_arkansas_river_footer.jpg);
    background-repeat: no-repeat;
}

.oneColFixCtrHdr #footer p {
    margin: 0;
}

Link to the page under construction:
http://www.thebrandingagency.com/clients/fibark/