CSS Properties: How to specify the width of the content area of an element

Last update on March 01 2024 13:09:46 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to specify the width of the content area of an element</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
div {
    width:60%; /* Sets the width of the div element to 60% of its containing block */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<h3><strong>w3resource Tutorial</strong></h3><!-- Displays a level 3 heading with strong text "w3resource Tutorial" -->

<div>w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial.</div>
<!-- Displays a div element containing a lengthy text with its width set to 60% -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to specify the width of the content area of an element using CSS.
The CSS rule sets the width of all div elements to 60% of their containing block.
The div element in the body contains a lengthy text, and its width is set to 60% to ensure proper display and readability of the text within the specified width.

Live Demo:

See the Pen width-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page