Making dynamic sized boxes

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开发者_Python百科 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

It's better you use The Jquery Equal Height Plugin to balance the height of the options.

If I understand you right, you want the box to resize based on the content. There's several options to do this, but one of them is to set a min-width and a max-width in the CSS of the box.

.option{
 min-width: 380px;
 max-width: 500px;
}

No matter what's inside the box, it will never have a width less than 380px or more than 500px. Does this help?