divを使用して<select>のボーダーをエミュレートする方法？

Question

私は選択タグの枠線を提供しようとしていて、最後の2時間は私の髪を引っ張っています。

絶対位置と相対位置で位置を使用する前に行っていましたが、ハードドライブがクラッシュしてコードがすべて失われました。私はこれが動作していないよう

<div style="position:relative; border:1px solid #cc0000;"> 
    <select style="position:absolute;"> 
     <option>1</option> 
    </select> 
</div> 

を持って簡単に言えば

...その内容

の幅、私はどのように設定しないとは対照的に、自動的に親のdivの幅に展開DIV divは自動的に選択ボックスの内容にフィットし、フレームから押し出されることなく1pxのボーダーがありますか？

もっとコードが必要な場合は、そう言います。

何かすべての助けがありがとうございます。 :)

EDIT

ここではいくつかのより多くのコードがあります...

HTML：

<div class="orderQuantity"> 
    <label for="quantity" class="orderInputLabel">Quantity:</label> 
    <div> <!--THIS IS THE DIV THAT NEEDS A BORDER!! --> 
     <select id="quantity_cs" name="quantity_cs" autocomplete="off" class="required"> 
      <option value=''>&#160;&#160;&#160;&#160;&#160;</option> 
      <option value='10'>10</option> 
      <option value='20'>20</option> 
      <option value='30'>30</option> 
      <option value='40'>40</option> 
      <option value='50'>50</option> 
      <option value='60'>60</option> 
      <option value='70'>70</option> 
      <option value='80'>80</option> 
      <option value='90'>90</option> 
      <option value='100'>100</option> 
     </select> 
    </div> <!-- end of div that needs border --> 
</div> 

CSS：

.orderQuantity { 
    margin-top: 12px; 
} 

これは私がこの時点で持っているすべてです。私は数多くのことを試しましたが、どれもうまくいかなかったのです絶対と親のdivを選択し、その逆を行うことを含む。

ヘルプ？ D：

Answer 1

私はフロートを含む解決策を見つけ出し、クロスブラウザで動作するように見える "クリア：両方"を見ました。

<div style="float:left;"> <!-- just toggle border on this div using jquery --> 
    <select> 
     <option>1</option> 
    </select> 
</div> 

<div style="clear:both;"></div> 

正常に動作するようです。私が何を試みているかを再確認してくれたMahimaとHusseinに助けてくれてありがとう。 :)

Answer 2

これにはjQueryを使用できます。クロスブラウザ対応。作業例を確認してくださいhttp://jsfiddle.net/Npv8P/2/