How to use div to emulate border for <select>?

I'开发者_C百科m attempting to provide a border for a select tag and have been pulling my hair out for the last 2 hours.

I had it done before using position via absolute and relative, but my hard drive crashed and all my code was lost.

Put simply I have

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

This doesn't seem to work... The div automatically expands to the parent div's width as opposed to the width of its content

How do I set the div to automatically fit to the contents of the select box AND have a border of 1px without getting pushed out of the frame?

If you need more code, please say so.

Any and all help is appreciated. :)

EDIT

Here's some more code...

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; 
}

This is all I have at this point. I've tried numerous things, none of which worked. Including making the select absolute and the parent div relative and vice versa.

Help? D:

You can use jQuery for this. Cross Browser Compatible. Check working example http://jsfiddle.net/Npv8P/2/

I've figured out a solution that involves floats and "clear:both" that appears to work cross browser.

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

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

Seems to work fine. Thanks to Mahima for reaffirming what I was trying and to Hussein for the help. :)