CSS Alignment

here is the address to my site:

http://www.billboardfamily.com

The problem I am having is in getting the "coming soon" graphic at the very top of the page to be located UNDER the search box in the black area (at the bottom left of the search bar to be exact, this will eventually become 5 graphis linked to other sites, such as twitter and facebook). I can not get this to work, for some reason, although I have gotten pretty close. I know the solution is simple, but I am getting frustrated. Can anyone shed some light on this for me?

CSS
/** BEGIN header **/
#header {
height: 178px;
}
#header .search {
float: right;
margin-top: 11px;
}
#header .search form {
background: url(../images/search.png) no-repeat 0 0;
height: 49px;
width: 284px;
}
#header .search form input {
float: right;
background-color: transparent;
border: 0;
font-size: 0.8em;
color: #FFFFFF;
height: 38px;
width: 223px;
margin-top: 5px;
text-transform: uppercase;
}
#header .search form button {
float: left;
width: 59px;
height: 49px;
background-color: transparent;
border: 0;
color: transparent;
text-indent: -9999px;

}


#header .subscribe {
float: left;
}

#header .logo {
clear: both;
}
#header .logo h1 {
padding-bottom: 32px;
}
#header .logo h1 a {
background: url(../images/logo.png) no-repeat 0 0;
display: block;
text-indent: -9999px;
height: 62px;
width: 352px;
}


#header ul {
list-style-type: none;
margin-left: 10px;
}
#header ul li {
float: left;
margin-right: 15px;
}
#header ul li a {
padding: 5px 8px;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
font-size: 0.9em;
font-weight: bold;
}
#header ul li a:hover {
background-color: #b9c3cf;
}
/** END header **/

Hello CarlMartin10,
Instead of floating that button left, try floating it right.
Something like this - #header .subscribe {
float: right;
clear: right;
}

You could also use absolute positioning to place it there. Just make your #header position: relative; so your .subscribe buttons will position relative to #header.

Hello CarlMartin10,
Instead of floating that button left, try floating it right.
Something like this - #header .subscribe {
float: right;
clear: right;
}

You could also use absolute positioning to place it there. Just make your #header position: relative; so your .subscribe buttons will position relative to #header.

Floating this right as you mentioned definitely moved the button to the right area, but it pushed down the rest of the header completely out of alignment.

I will try the position:relative in the header. Do I need to put that in the #header portion of the css, or in the #header .subscribe portion? Also, do I then specify the x,y position of the button at that point? As I said, I am very unskilled at css. Thanks for the help!

I figured it out, thanks for the guidance!

That looks good CarlMartin10, but your using conflicting CSS. If you position that element you probably should not also float it.

Try it this way:
Make your #header position: relative;
Make the CSS for .subscribe look like this - #header .subscribe {
position: absolute;
top: 75px;
left: 635px;
text-align: center;
color: #ffffff;

}

Top and left measurements may need re-adjusted.

Then have a look at some errors found by the validator (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbillboardfamily.com%2F).