Welcome to CSS Basics. More info on this section at the bottom of this post.

Using Min/Max Width and Height in CSS

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.

Questions? Clarifications?

This post is not intended to be an exhaustive reference on this subject. It's meant to provide a simple CSS tip for beginners. If you have any questions or clarifications on anything I've said here, add them to the comments. If necessary, I'll continually improve this article to keep it up to date with the latest CSS standards and best practices.

This is the CSS Basics section of Impressive Webs. These posts do not appear in the main home page feed. You can subscribe via RSS or get an email notification whenever a new post is added.

Advertise Here

9 Responses

  1. 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”.

  2. Is it change with the browser?

  3. Nat:

    Useful Thanks ^_^

  4. srirang:

    Thank you,
    Its very clear demo

  5. Although your article is good but i really confuse about maximum and minimum property in css.

  6. PaulO:

    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?

  7. Adlet:

    What about an efficiency ? Is it min-height(max-height) faster than just height property ?

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.