html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS max-width property

Definition

The CSS max-width property allows us to specify a maximum 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 max-width property..

inherit - The element will inherit the max-width property of its parent element.

length - Defines a length value in a unit measurement such as em or pixel.

none - No limit set for the width of the box.

n% - A percentage value relative to the parent element where n is a number.

Default Value

Default value is set to none for the max-width property value.

Inheritance

The max-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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS max-width property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS max-width Property</title>

<!-- Valid values for CSS max-width Property are:
	
	inherit, length, none and percentage value.
	
--> 

<style type="text/css">

#img1 {
  width: 200px;
  max-width: 150px;
}

#img2 {
  width: 200px;
}

</style>

</head>
<body>
<h1>CSS max-width Property</h1>
<h2>Image with width of 200, but max-width of 150 pixels</h2>
<p>
<img id="img1" src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Beef and Ale Pie" />Look at the image width.</p>
<h2>Same image with width of 200 pixels</h2>
<p>
<img id="img2" src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Beef and Ale Pie" />Look at the image width.</p>
</body>
</html>

How It Looks

The results of using the max-width property with the values above will look something like the following:

notepad
CSS max-height    << Prev          Next >>   CSS min-height

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.