aligning the textboxes and buttons (CSS) - html

Question

Fiddle here
CSS Code:
#searchbox-container {
width: 100%;
height: 80px;
clear: both;
}
.searchbox {
width: 100%;
margin-left:2.5%;
margin-right: 2.5%;
}
.searchbox input {
width: 250px;
height: 18px;
-webkit-border-radius: 20;
-moz-border-radius: 20;
border-radius: 20px;
padding: 10px 20px 10px 20px;
border: 1px solid #16a085;
}
.searchbox input:hover {
width: 250px;
height: 18px;
-webkit-border-radius: 20;
-moz-border-radius: 20;
border-radius: 20px;
padding: 10px 20px 10px 20px;
border: 1px solid #e67e22;
}
/* SECTIONS */
.section-search {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col-search {
display: block;
float:left;
margin: 1% 0 1% 5%;
}
.col-search:first-child { margin-left: 0; }
/* GROUPING */
.group-search:before,
.group-search:after {
content:"";
display:table;
}
.group-search:after {
clear:both;
}
.group-search {
zoom:1; /* For IE 6/7 */
}
.btn-search {
-webkit-border-radius: 25;
-moz-border-radius: 25;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 0px #666666;
-moz-box-shadow: 0px 0px 0px #666666;
box-shadow: 0px 0px 0px #666666;
color: #ffffff;
font-size: 16px;
background: #16a085;
padding: 10px 40px 10px 40px;
text-decoration: none;
}
.btn-search:hover {
background: #1abc9c;
text-decoration: none;
}
/* GRID OF THREE */
.search-span_3_of_3 {
width: 100%;
}
.search-span_2_of_3 {
width: 65%;
}
.search-span_1_of_3 {
width: 30%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.col-search {
margin: 2% 0 2% 0%;
}
}
#media only screen and (max-width: 480px) {
.search-span_3_of_3 {
width: 100%;
}
.search-span_2_of_3 {
width: 100%;
}
.search-span_1_of_3 {
width: 100%;
}
}
HTML Code:
<div id="searchbox-container">
<div class="searchbox">
<center>
<form>
<div class="section-search group-search">
<div class="col-search search-span_1_of_3">
<input name="city" type="text" placeholder="City" />
</div>
<div class="col-search search-span_1_of_3">
<input name="category" type="text" placeholder="Category" />
</div>
<div class="col-search search-span_1_of_3">
<a class="btn-search" href="#">Search</a>
</div>
</div>
</form>
</center>
</div>
</div>
PROBLEM DEFINITION:
Please visit this for the current scenario "http://jsfiddle.net/Hq6UL/"
1. I am having the problem of overlapping of the two text boxes when screen resolution is lessened.
2. The search button is not aligned with the text boxes. they all need to be in the same horizontal plain.
3. Currently when i hover over the textboxes the color changes to orange but it should be like when i click on the box and even if y mouse moves out from the hover, the color of the border should still remain orange till i am typing inside the box. once i am done typing and i go to the other text box the previous box border should become green and the 2nd box which was green bordered, should turn orange when i am now typing into it.
4. I would like to have tips on how to make the text boxes more attrative, keeping the flat designing style in consideration.
Please Help!!!
Regards!!!

Answer 1

Your main problem comes from the fact that DIV default to block display, while the A (anchor) default to inline display.
So, first turn the A to block display by adding "display: block;" to your ".btn-search" class.
Then, you will notice that it's only 38px height while the other are 40px height. As you have a top & bottom padding of 10px, just fix the height of your same A to 20px by adding a "height: 20px;" to your ".btn-search" class.
I made the update in the JSFiddle and it works as you want:
http://jsfiddle.net/Hq6UL/2/
.btn-search {
-webkit-border-radius: 25;
-moz-border-radius: 25;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 0px #666666;
-moz-box-shadow: 0px 0px 0px #666666;
box-shadow: 0px 0px 0px #666666;
color: #ffffff;
font-size: 16px;
background: #16a085;
padding: 10px 40px 10px 40px;
text-decoration: none;
display: block;
height: 20px;
}
I also added this code so it keeps the color when the input field has the focus:
.searchbox input:focus {
width: 250px;
height: 18px;
-webkit-border-radius: 20;
-moz-border-radius: 20;
border-radius: 20px;
padding: 10px 20px 10px 20px;
border: 1px solid #e67e22;
}

Answer 2

Use this code in the CSS :
/* GO FULL WIDTH AT LESS THAN 850 PIXELS */
#media only screen and (max-width: 850px) {
.col-search {
margin: 2% 0 2% 0%;
}
}
#media only screen and (max-width: 850px) {
.search-span_3_of_3 {
width: 100%;
}
.search-span_2_of_3 {
width: 100%;
}
.search-span_1_of_3 {
width: 100%;
}
}
EDIT :: For the problem with the vertical alignment :
<a class="btn-search" href="#" style="vertical-align: -10px;">Search</a>