Is there a way to make a <div>
container resizeable with drag & drop?
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
The best method would be to use CSS3. It supported by at least Webkit and Gecko.
According to the w3c spec:
div.my_class { resize:both; overflow:auto; /* something other than visible */ }
Webkit and Firefox do not interpret the specs the same way. In Webkit the size is limited to the width and height set. There's another question: How can I use CSS to make an element resizable to a dimension smaller than the initial one? concerning this.
div { border: 1px solid black; } .resizable-content { min-height: 30px; min-width: 30px; resize: both; overflow: auto; max-height: fit-content; max-width: fit-content; }
<div class="resizable-content">Resize Me!</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With