With CSS3, users will be able to resize specific elements on your pages, through the use of the “resize: ” property. The example below make a class of <div> called “resize” that the user will be able to scale.
div.resize {
border: 1px #00000 solid;
height: 100px;
overflow: auto;
resize: both;
width: 100px;
}
The “resize: ” property can be set to “horizontal”, “vertical” or in this case “both”, depending on which way you want the element to be resizeable. Note the “overflow: ” property set to auto, so that scrollbars will appear if the user resizes the element to a smaller size than the content needs. You can set the “overflow: ” property to hidden to clip any content in the middle.
You can also use the “resize: ” the property, in combination with “min-height: “, “max-height: “, “min-width: ” and “max-width: ” to constrain how the element can be resized.
I can only find support for this in Safari 3 so far, but I’m sure support for Firefox and others is round the corner. it’s worth noting that Safari has had resize support for <textarea> elements enabled by default for a while. Although useful (undersized <textarea> elements are a pain), it’s worth restricting the maximum height and width so as to not let users completely destroy your interfaces.