Making dynamic sized boxes

Mohsen

I have a quiz that have four options to choose.
Every question have different options and sometimes an option have a long text that doesn’t fit in my fixed size boxes (say div).
I don’t want to have largest possible box to prevent overflow in my boxes. I want to size my box depended on longest option that I have in current quiz and if every option is short enough use fixed sizes that I had.

this is my HTML markup:

<div id="options">
    <div class="option 1">
        <span class="optiontText"></span>
    </div>
    <div class="option 2">
        <span class="optiontText"></span>
    </div>
    <div class="option 3">
        <span class="optiontText"></span>
    </div>
    <div class="option 4">
        <span class="optiontText"></span>
    </div>
</div>

and this is CSS:

#options{ width:800px;}
.option{width:380px; margin:10px;}

Text of optionTexts came from database and I want a jQuery function that size my boxes depended on size of text