zoekformulier aanpassen aan lay out

Hallo,

Na lang proberen heb ik toch besloten om hier een post te doen.
Ben nog een beginner met html en css.

Wat ik probeer te doen is mijn werkend .php zoekformulier aan te passen op mijn lay out.
Dit zijn de codes:

.CSS ////// LAY OUT

/* search widget */
#searchform {
	position:relative;
}
#searchform .bgsearch {
}
#searchform #s {
	width:85%;
	padding:8px 5px !important;
	border:0;
	color:#999;
	background-color:#efefef;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
#searchform #s2 {
	width:100%;
	margin-top:12px;
	padding:7px 5px 8px!important;
	border:0;
	color:#999;
	background-color:#fff;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	font-size:12px;
	float:right;
	box-shadow:inset 0 0 10px #eee, 0px 0px 0px #aaaaaa;
	-khtml-box-shadow:inset 0 0 10px #eee, 0px 0px 0px #aaaaaa;
	-moz-box-shadow:inset 0 0 10px #eee, 0px 0px 0px #aaaaaa;
	-ms-box-shadow:inset 0 0 10px #eee, 0px 0px 0px #aaaaaa;
	-o-box-shadow:inset 0 0 10px #eee, 0px 0px 0px #aaaaaa;
	-webkit-box-shadow:inset 0 0 10px #eee, 0px 0px 0px #aaaaaa;
}
.searchbutton {
	background: url(../images/icon_search.png) no-repeat right center !important;
	border:0 !important;
	width:20px;
	height:17px;
	position:absolute;
	z-index:11111111111;
	left:215px;
	top:6px;
	cursor:pointer;
}
.searchbutton2 {
	background: url(../images/icon_search.png) no-repeat right center !important;
	border:0 !important;
	width:20px;
	height:17px;
	position:absolute;
	z-index:11111111111;
	left:158px;
	top:17px;
	cursor:pointer;
}

.ads {
	float:left;
	margin:0 20px 15px 0
}
.alignleft {
	float:left;
	margin-right:15px;
}
.tag-cloud {
	width:100%;
	float:left;
	margin:0px 0 30px;
}
.tag-cloud a, .tag-cloud a:visited {
	font-size:11px;
	display:block;
	color:#666;
	background-color:#ddd;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	text-decoration:none;
	float:left;
	margin:0 6px 7px 0;
	padding:4px 12px 4px 12px;
}
.tag-cloud a:hover {
	font-size:11px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	display:block;
	color:#fff;
	background-color:#8cbd2e;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	text-decoration:none;
	float:left;
	-moz-transition: all 0.2s linear 0s;
	-webkit-transition: all 0.2s linear 0s;
	-o-transition: all 0.2s linear 0s;

HTML LAY OUT formulier/////

<form method="get" id="searchform" action="#">              <div class="bgsearch">                <input type="text" name="s" id="s2" value="Site Search..." onFocus="if (this.value == 'Site Search...')this.value = '';" onBlur="if (this.value == '')this.value = 'Site Search...';" />                <input type="submit" class="searchbutton2" value="" />   



WERKENDE HTML BODY ////////

<form method="get" action="index.php" onsubmit="return formcheck_onsend('quicksearch');">
<input name="action" type="hidden" value="search" /><input name="all" type="hidden" value="true" /><input name="order" type="hidden" value="1" /><input name="r" type="hidden" value="50" /><input name="site" type="hidden" value="search" />
<div style="float:left; padding-right:2px;"><input id="quicksearch" style="width:100px;" name="text" type="text" value="%search_term%..." onfocus="if(this.value == '%search_term%...')this.value=''" /></div>
<input type="submit" value="%submit%" />
</form>

Ik hoop dat jullie mij verder kunnen helpen, heb diverse dingen geprobeerd. Kom er echter niet uit.

Alvast bedankt!