CSS (CSS3) property resize can be used to make a div (or other block level element) resizable by clicking and dragging bottom right corner of the element. Few points to note about resize:
The overflow property must be anything other that visible. e.g. It can be hidden, scroll or auto.
It is not supported by IE.
In chrome, safari, opera user can only make an element bigger than its original size in both direction. Firefox lets use resize the element to smaller that its original size.
CSS property resize
CSS version:
CSS 3
Value:
none | both | horizontal | vertical
Initial:
none
Applies to:
elements with overflow other than visible
Inherited:
no
CSS3 resize div example – both direction
<style type="text/css">
.container {
width: 200px;
height:80px;
background-color:lightgreen;
overflow: scroll;
resize: both;
}
</style>
<div class="container">
This is some text and its container div can be resized.
</div>
<style type="text/css">
.container {
width: 200px;
height:80px;
background-color:lightgreen;
overflow: scroll;
resize: horizontal;
}
</style>
<div class="container">
This is some text and its container div can be resized horizontally.
</div>
<style type="text/css">
.container {
width: 200px;
height:80px;
background-color:lightgreen;
overflow: scroll;
resize: vertical;
}
</style>
<div class="container">
This is some text and its container div can be resized vertically.
</div>
