Did you find this useful?
Socialize it today.


CSS3 Resizing Elements

Thursday, November 29, 2012

A nifty feature that CSS3 has included is the ability to allow the user to resize elements on a page. Prior to CSS3, this was accomplished with hacks. CSS3 includes the resize property as a solution. The resize property allows for you to specify if an element is resizable.


Browser Support

The resize property is supported in Firefox, Chrome, and Safari. It is not supported in Opera or Internet Explorer version 10 or earlier.


Syntax

The resize property specifies whether an element is resizable by the user within the browser. The acceptable values are none, both, horizontal, and vertical.


resize: none|both|horizontal|vertical;


ValueDescription
noneThe user cannot resize the element
bothThe user can resize both the width and height of the element
horizontalThe user can resize the width of the element
verticalThe user can resize the height of the element


Example

In this example, the div element will be allowed to be resized both horizontally and vertically.


<!DOCTYPE html>
<html>
<head>
<style> 
#div {
border: 1px solid black;
background-color: white;
padding: 20px;
line-height:1.5em; 
width:400px; 
height:250px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, s...</div>

</body>
</html>

Results

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Responsive Web Design with HTML5 and CSS3 Sergeys HTML5 CSS3 HTML CSS and JavaScript