100% width layout not working properly in a fluid layout - html

Question

1st sorry if the title is not 100% at the pont, i really have no idea how to compose it.
Anyway here is a simple problem with 100% width layout. I have a form that is inside a fluid container, it has - 1 input, 1 select, 1 button, they all are align inline (horizontal)
the problem when i minimize the window the button and then the select list they move down. which i dont want that.
Here is a example in the fiddle http://jsfiddle.net/4GSLE/ you can minimize the html part and you will see the problem.
How to make them to be in one line and not to move down?
.main {
max-width: 1200px;
margin: 0px auto;
background-color: #eee;
line-height: 50px;
padding: 10px;
}
form {
padding: 0 0 0 0;
margin: 0 0 0 0;
display: block;
}
.clear {clear: both;}
input, select {
float: left;
height: 50px !important;
padding: 0 10px;
width: 66% !important;
border: 1px solid #d6d8db;
margin-right: 20px;
}
input.button {
height: 54px !important;
padding: 0 10px;
margin-top: -1px !important;
width: 125px !important;
border: 1px solid #d6d8db !important;
background: #333;
cursor: pointer;
color: #fff;
}
select {
width: 200px !important;
height: 52px !important;
}
html:
<div class="main">
<form>
<input type="text" name="" value="search" />
<select>
<option>select</option>
</select>
<input type="submit" name="" value="Search now" class="button" />
</form>
<div class="clear"></div>
</div>

Answer 1

Some CSS tweaking to the form, input, and select selectors should do the trick.
form {
padding: 0;
margin: 0;
display: block;
white-space: nowrap;
}
input, select {
display: inline-block;
height: 50px;
padding: 0 10px;
width: 66%;
border: 1px solid #d6d8db;
margin-right: 20px;
}
Demo Here
Side note: Unless you really need them, all those !important declarations will end up causing more trouble than solving issues. I'd avoid !important as much as possible.