div resizable like text-area

Question

Browsers allow text-areas to be re-sized by dragging their corner by default. I was wondering if this rule could be applied to other elements (a div for instance). I know th

Answer 1

Use the css3 resize property.

div {
    resize: both;
}

There is also a resize: horizontal and resize: vertical.

---

Not currently cross browser http://caniuse.com/#feat=css-resize

Answer 2

You can do this using CSS3. You can create a user resizable div tag by setting the resize and overflow styles. I have set resize to both horizontal and vertical here:

.isResizable {
  background: rgba(255, 0, 0, 0.2);
  font-size: 2em;
  border: 1px solid black;
  overflow: hidden;
  resize: both;
  width: 160px;
  height: 120px;
  min-width: 120px;
  min-height: 90px;
  max-width: 400px;
  max-height: 300px;
}

<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>