Even if you’re just getting started with CSS, you’ve likely used the height
and width
properties quite a bit already.
But you’ve probably noticed that those properties can put unnecessary constraints on your page elements. So you might benefit from knowing and using related properties that use the “min” and “max” prefixes.
min-width / min-height
The min-width
and min-height
properties accept unit values the exact same way that the height
and width
properties do, so there’s no difference in the syntax. You can use any acceptable unit, including pixels, ems, and percentages.
These properties are used to tell the browser to render an element at a “minimum” size. Here’s an example with both:
.element { min-height: 200px; min-width: 200px; }
A block-level element with the above CSS would have, at the very least, dimensions of 200×200 pixels — even if the element was empty. However, since block-level elements will, by default, naturally expand to fit the available space, only the min-height
value would actually have any effect in many cases.
To see the effects of min-width
, you could add a float to the element. Here’s a demonstration. Try removing the float in that example, and you’ll see the element expand to fit the page.
max-width / max-height
Like the “min” properties, max-width
and max-height
accept the usual unit values. But this time, instead of a minimum size for an element, these properties set the maximum size. Here’s another simple example:
.element { width: 15%; height: 15%; max-height: 200px; max-width: 200px; }
Notice that this time I’ve specified percentage values for the width and height, but I’ve constrained the maximum width and height values at 200px. The width of “15%” will be calculated based on the size of the parent element (that is, 15% of the parent). But even if the parent element is 5000px wide, the .element
box won’t get any wider than 200px, which is the maximum width that we’ve set.
Final Notes
Min- and max- width and height values should become a regular part of your CSS toolbox. min-height
is useful if you want to give an element layout in IE7. Also, you could have a problem where you have a fluid header or footer that doesn’t expand properly, which can be fixed with min-width
.
And, of course, these properties are quite useful for responsive web design. Used in conjunction with CSS3 media queries, the max- properties can help you ensure that you don’t have overly-wide elements on any page, which can make content awkward and unreadable.
Interesting float:left required for min-width but not for max-width.
And I’ve add your site in exception list of Ad block :)
Hey, thanks.
Just to clarify: float:left isn’t required, it’s just one way to kind of shrink the element down so you can see the effects of it. It’s just how floats work, really, but you don’t have to have float:left on it, because for example, the screen size might cause the element to shrink too, which would also show the “min-width”.
Yes I know. I was just thinking that Min-height should work without giving float or width to element but it’s not the case.
Is it change with the browser?
Useful Thanks ^_^
Thank you,
Its very clear demo
Although your article is good but i really confuse about maximum and minimum property in css.
Do you know of a reference how different browsers (or perhaps the specification) resolve conflicts? Eg if I specify a min-width of 400px and a max-width of 50%, what size will it be rendered as on a 480px screen? 400 or 240?
What about an efficiency ? Is it min-height(max-height) faster than just height property ?