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.

13 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. Supun says:

    Is it change with the browser?

  3. Nat says:

    Useful Thanks ^_^

  4. srirang says:

    Thank you,
    Its very clear demo

  5. walif says:

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

  6. PaulO says:

    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 says:

    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 and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).