Problem with webkit float

Question

I have some problem when I set 2 floating div elements, one of the div contains a select element when there was no problem on the page loaded by divs, but as soon as I click on the element in the select box, the div is located in the right shift to the right?

Here is a code example of what I'm saying:

#div1,#div2{float:left} #div1{width:200px;margin-right:10px} #div2{width:760px} 

and html

 <div id="wrapper"> <div id="div1"><!--here the select goes--></div> <div id="div2"><!--here the table goes--></div> </div> 

And here is a screenshot for what happens after and after:
Screen shot

No javascript involved at all

I tested with Opera (Presto), Firefox (Gecko), IE8 (Trident) and without problems, it seems that it only appears in a Webkit-based browser, since I tested Chrome 2, SR Iron and QTWeb

PS: try to ignore the ugly table title, I will fix it soon (it currently works fine in Opera, Firefox, IE8)

Answer 1

In css try:

 #div1{width:200px;margin-right:10px;float:left;} #div2{width:760px;float:right;} 

I hope that the problem will be fixed, but due to the fact that you use fixed sizes, it will still break if the window size is small.

Answer 2

If you want to configure web browsers with css only:

 @media screen and (-webkit-min-device-pixel-ratio:0) { "element/class or id here"{ whatever you need here, ie: padding-top: 24px; } }