CSS float question

Hi friends. I need some help with floating elements. Here is the page: http://www.cep-dc.org/test.cfm

Problem: I want the navigation container (About CEP, Research Areas, and so on) to obediently float underneath the Search container, no matter what the screen size or resolution.

If you view the page http://www.cep-dc.org/test.cfm in a big wide screen, the navigation container floats away to the left of the search container.

Here's the relevant style sheet, below. What am I missing? Thank you for your help.

Eric

body{
background-color:#fff;
}


/* wrap */
.wrap	{
max-width: 80%;
height: auto;
margin:1.0em auto;
}

/* header */
.header	{
border:1px solid #000;
min-height:6.0em;
vertical-align:middle;
}

/* logo */
.logo img {
	max-width: 100%;
	height: auto;
	border:none;
	float:left;
}


/* search and social media icons */

.search-container {
border:1px solid #000;
max-width:70%;
min-height:2.0em;
float:right;
text-align:right;
position: relative;
top: 20%;
transform: translateY(20%);
margin-bottom:1.4em;
}

.search-container i {
border:none;
letter-spacing:1.0em;
color: #d89d68;	
}

.search-container input {
border:1px solid #40535c;
color: #40535c;
border-radius:0;
box-shadow:none;
font:normal 0.8em 'Open Sans', 'Oswald', sans-serif;
}

.search-container form {
display:inline-block !important;
*display:inline;
margin-right:1.0em;
}


/* menu */
.menu{
border:1px solid #000;
max-width:70%;
min-height:2.0em;
background:#fff;
float:right;
}

Select allOpen in new window