CSS min-width PropertyS2C Home « CSS min-width Property

Definition

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

inherit - The element will inherit the min-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 0 for the min-width property value.

Inheritance

The min-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 min-width property follows -->
<html  lang="en">
<head>
<title>CSS Reference - CSS min-width Property</title>

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

<style type="text/css">

#img1 {
  min-width: 150px;
}

#img2 {
  min-width: 300px;
}

</style>

</head>
<body>
<h1>CSS min-width Property</h1>
<h2>Image with min-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 min-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 min-width property with the values above will look something like the following:

When you cut and paste the code, adjust the screen size to see the effects of the min-width property.

min-width

go to home page Homepage go to top of page Top