Resize without JS

by simurai

HTML

<div class="resizable">
    Make any element resizable without JS. Great for protyping and to test out how the layout flows.
</div>

CSS

body { padding: 50px; font-family: sans-serif; }

div { 
    padding: 20px;
    background-color: hsl(0,0%,90%);
    width: 150px;
}


.resizable {
    resize: both;   /* Options: horizontal, vertical, both */
    overflow: auto; /* fix for Safari */
}

JavaScript

// Make any element resizable without JS. 

// Works in Firefox, Chrome, Safari. Solution found here: http://stackoverflow.com/questions/1837926/css3-resize-in-webkit-safari