Question

I have a box that has the div class box_1 assigned to it.

Now i want to give this class a width but also make it expandable.

If i just try to give it a value of auto, It will just expand to the end of the screen. thats not what i want. So say i give it a width of 4 inches but the content inside the div requires more space (dynamic content), it will need to be expanded. any ideas on how i could make it expandable (only when it needs to be expanded) and also give it a ‘default width’?

Answer 1

You can use the CSS propety min-width for this.

You can do it like this:

.box_1{
    min-width: 4in;
}

Now the div would take up 4 inches by default if the content fits within it, and expand if needed.

Update :
Looking around i found this How to make div not larger than its contents?

So what you need is to use following css:

.box_1{
    display: inline-block;
    min-width: 4in;
}

This sets the minimum width to a specific amount and converts the element to inline-block. But as per the post linked above this does not work in IE 7/8, for that you would need to change the div to span.

Try it out here:
div => http://jsfiddle.net/TdNHs/
span => http://jsfiddle.net/TdNHs/1/