webkit float issue

Question

I have some problem where i set 2 floated div elements, one of div contain select element, when the page loaded the divs didn't have the problem, but as soon i click on of the element(s) on select box, the div that positioned in right shift to bottom?

Here some example code about what i'm talking:

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

and the html

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

And here the screenshot for what happening after and before:
Screenshot

No javascript involved at all

I've tested with Opera (Presto), Firefox (Gecko), IE8 (Trident) and no problem, seem it only appears on Webkit based browser, since i've tested on Chrome 2, SR Iron & QTWeb

PS: try to ignore the ugly table header, soon i'll fix it (it's currently ok on Opera, Firefox, IE8 browser)

Answer 1

In the css try:

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

Hopefully that will fixed the selecting problem but because your using fixed sizes it will still break if the window size is to small.

Answer 2

If you want to target webkit browsers only using css:

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