CSS width PropertyS2C Home « CSS width Property
Definition
The CSS width property allows us to specify the content width for a box model element.
Applies To
All elements except non-replaced inline elements, table rows and row groups.
Property Values
negative values are NOT acceptable when using the CSS width property..
auto - The element width property value will be determined, dependant upon the properties of other values. Look at the W3C CSS Specification for a full list of elements and how the width is determined.
inherit - The element will inherit the width property of its parent element.
length - Defines a length value in a unit measurement such as em or pixel.
n% - A percentage value relative to the parent element where n is a number.
Default Value
Default value is set to auto which allows the browser to assign the width property value.
Inheritance
The width property is NOT inherited from the parent element unless specified using the inherit property value.
Browser Anomalies
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS width property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS width Property</title>
<!-- Valid values for CSS width Property are:
auto, inherit, length and percentage value.
-->
<style type="text/css">
#img1 {
width: 150px;
}
#img2 {
width: 300px;
}
</style>
</head>
<body>
<h1>CSS width Property</h1>
<h2>Image with width of 150 pixels</h2>
<p>
<img id="img1" src="https://server2client.com/images/beefalepiesmall.jpg"
alt="Beef and Ale Pie">Look at the image width.</p>
<h2>Same image with width of 300 pixels</h2>
<p>
<img id="img2" src="https://server2client.com/images/beefalepiesmall.jpg"
alt="Beef and Ale Pie">Look at the image width.</p>
</body>
</html>
How It Looks
The results of using the width property with the values above will look something like the following:
Relevant CSS Tutorial
CSS Intermediate Tutorials - Lesson 2 - A Final Look At The Box Model
Homepage
Top