Controlling the Size of an Element

The size-related properties are described in the following table:

Property	Description	Values
width	Set the width	auto or <length> or <%>
height	Set the height	auto or <length> or <%>
min-width	Set the minimum width	auto or <length> or <%>
min-height	Set the minimum height	auto or <length> or <%>
max-width	Set the maximum width	auto or <length> or <%>
max-height	Set the maximum height	auto or <length> or <%>
box-sizing	Sets which part of an element's box is used for sizing.	content-box \| padding-box \| border-box \| margin-box

auto means browser would do calcluation.

The default value for all these properties is auto.

The percentage values are calculated from the width of the containing block.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        div { 
            width: 75%; 
            height: 100px; 
            border: thin solid black; 
        } 
        p { 
            background: lightgray; 
            border: 4px solid black; 
            margin: 2px; 
            height: 50%; 
        } 
        </style> 
    </head> 
    <body> 
        <div> 
            <p> 
                    HyperText Markup Language (HTML) is the main markup language for 
                    displaying web pages and other information that can be displayed 
                    in a web browser(From From Wikipedia, the free encyclopedia).
            </p> 

        </div> 
    </body> 
</html>

Click to view the demo

If the user resizes the browser window, the body element will be resized and this will lead to div element being resized.

Home
HTML CSS Book
CSS

Size: