Unknown Space between 2 Container Divs - css

Question

Im trying to determine why there would be space between 2 Containing Divs as shown, and I would appreciate any insight as to why this is occurring:
The unknown space occurs between the mid-feature div (olive) and bottom-wrap div (orange)
I have no heights set anywhere.
I would like to see the orange div up against the olive div just above it.
I can post all of the CSS, or you can FireBug this: www.davincispainting.com
Here is all of the CSS:
*{ margin:0; padding:0 }
body
{
/*background: url("/images/blueback5.jpg") repeat-x scroll 0 0 transparent;*/
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#top-wrap {
height: 126px;
width: 940px;
/*background-color: Yellow;*/
margin: 5px 0 0 0;
}
#head-logo {
background: url("/images/logo3.png") no-repeat scroll 0 0 transparent;
/*background-color: Green;*/
height: 126px;
width: 214px;
margin: 0px 0 0 58px;
position: absolute;
z-index: 100;
}
#submenu1 {
border: 0 solid #000000;
color: #FFFFFF;
/*background-color:Green;*/
font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
font-size: 1.6em;
height: 35px;
width: 155px;
/*padding: 10px 0 0;*/
margin: 7px 0 0 774px;
position: absolute;
}
#submenu2 {
/*border: 0 solid #000000;*/
color: #FFFFFF;
/*background-color:Blue;*/
font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
font-size: 1.8em;
text-align: right;
height: 20px;
width: 114px;
margin: 30px 0 0 818px;
/*padding: 5px 0 0;*/
}
a.contact
{
background-image: url("/images/RapidButton2.png");
/*border: 1px solid #CCCCCC;*/
/*clear: both;*/
/*color: #FFFFFF;*/
display: block;
font-size: 11px;
/*margin-bottom: 1px;*/
/*padding: 3px 5px;*/
text-align: center;
width: 165px;
height: 27px;
}
a.contact:hover
{
background-image: url("/images/RapidButtonHov2.png");
}
#navigation-primary {
margin: 12px 0 0 276px;
position: absolute;
}
#global-wrap {
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}
#global-inner {
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 880px;
}
#global-inner .topleft {
background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
float: left;
height: 9px;
width: 9px;
}
#global-inner .topright {
background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
float: right;
height: 9px;
width: 9px;
}
#global-inner .bottomleft {
background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
float: left;
height: 9px;
margin-top: -8px;
/*margin: 776px 0 0 0;*/
width: 9px;
}
#global-inner .bottomright {
background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
float: right;
height: 9px;
margin-top: -8px;
/*margin: 776px 0 0 0;*/
width: 9px;
}
#top-feature {
height:330px;
width: 848px;
margin: 12px 0 0 16px;
background: #E4EAEF;
/*background: orange;*/
/*padding: 10px 0 0 10px;*/
position: absolute;
text-align: left;
}
.slideshow {
height: 330px;
width: 848px;
margin: 0 0 0 0;
/*background: blue;*/
position: absolute;
}
#mid-feature
{
margin:350px 0 0 16px;
width:848px;
height:318px;
background-color:Olive;
position:relative;
overflow:hidden;
}
#mid-featureleft
{
height:318px;
width:552px;
/*background-color:Purple;*/
float:left;
position:relative;
}
#mid-featureright
{
height:318px;
width:296px;
background-color:#B9C1CC;
/*background-color: red;*/
float:left;
position: relative;
}
#mid-featureleft h1
{
color: #FF0000;
font-family: Arial,Helvetica,sans-serif;
font-size: 2.1em;
}
#mid-featureleft .contentbox
{
padding:7px 7px 7px 7px;
}
#mid-featureleft p
{
color: #0C2A55;
margin:0px 0 11px 0px;
/*font-style:normal;*/
/*width: 97%;*/
/*font-size: .5em;*/
font-size: 12px;
}
#bottom-wrap
{
height:60px;
width: 868px;
margin: auto 0 0 6px;
background:orange;
position: relative;
}
#copyright
{
float: left;
/*background-color:Teal;*/
width: 260px;
height: 60px;
text-align: left;
position: absolute;
margin:0 0 0 6px;
}
#bottom-logos
{
height:60px;
width:596px;
margin:0 0 0 267px;
background: url("/images/logos2.png") no-repeat scroll 0 0 transparent;
/*background-color:red;*/
position:absolute;
}

Answer 1

I took a look at your page and you have two <br style="clear: both"> lines between the divs. Take those out and it should be fine.

Answer 2

The <br style="clear: both;"> are, as noted by Richard Pianka, causing the extra vertical spaces, that's what <br> does. If you don't want to drop them completely because you're worried about clearing your floats, then use a tag that has no inherent visual representation:
<div style="clear: both;"></div>