Boostrap Dropdown moves other divs down - css

Question

When I click the dropdown button the other content under it moves down with it. The I've tried z-index, position:relative; position:static How can I prevent this from happening. I don't want anything to move when the dropdown is clicked. Any ideas?
<div class='whiteBox'>
<div class='newProducts'></div>
<div id="compareInfo">
<div id="comparisionTitle">Title</div>
<div class="divStyle">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="chooseItem">Drop down Box<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="item1DropDown" href="#">item1</a></li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<div id="compareBoxes">
<div id="Label">Text under Dropdown</div>
<button class=
"btn btn-compare" id="compareButton" type=
"submit">Submit</button>
</div>
</div>
</div>
#divStyle{
list-style:none;
position:relative;
float:left;
right:240px;
}

Answer 1

You have to set the div you want to have a dropdown menu like this:
list-style:none;
position:relative;
float:left;
And then set your own position for it.
Here is an excellent customizable tutorial on it.

Answer 2

You seem to be missing the dropdown class on your div, and the role field for the li and a tags within your dropdown. Try adding role="presentation" to those.
Like:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"...>...</button>
<ul class="dropdown-menu">
<li role="presentation"><a role="presentation ...>item1</a></li>
</ul>
</div>

Answer 3

This is a simplified version of a typical bootstrap navbar dropdown (in the documention you can see it working in the original navbar)
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
and when it's clicked it toogles display:block and the position is always
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
Since bootstrap highly depends on the it's markup you need to strictly reference the documentation, so I suggest you go over your code to see what's missing.