Javascript Chosen PlugIn with Grid System

Question

I have implemented the Chosen Plug-in on my web page and it worked great. Recently I decided to switch over to the 960 grid system to give my page a facelift. When I did this though, the styles in the Chosen Plug-in seem to be messing with the grid system causing the outlines on the grid to go off of the screen to the left. I have a feeling this has to do something with how the grid is floated relatively and the styles in the plug in are just throwing it off. However, I can't seem to find what exactly in the styles that is causing this or how I can change it. Has anyone had any experience with this plug in who might be able to give me advice? I would rather not have to strip this plug in, since functionally, it works great!

EDIT: Although, when I click on the drop down, the styles seem to look right. It is only when the drop down items are not showing.

Answer 1

Figured this one out.

I had to change the CSS property of the dropdown to display: none instead of absolute positioning -99999px left.

Here is my code:

.chzn-container .chzn-drop {
  width: 100% !important;
  display: none;
  background: #f6fbfd;
  border: 1px solid #9fbeca;
  border-top: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 900;
  width: 100% !important; /*to line up the right side visually*/
  -moz-box-sizing   : border-box;
  -ms-box-sizing    : border-box;
  -webkit-box-sizing: border-box; 
  -khtml-box-sizing : border-box;
   box-sizing: border-box;

Then I just set the value to inline here:

.chzn-container.chzn-with-drop .chzn-drop {
  left: 0;
  display: inline;
}