Vince Scordino Team : Web Development Tags : CSS

CSS Max-Width and Max-Height Properties

Vince Scordino Team : Web Development Tags : CSS

If you’ve landed on this blog, then I’m presuming you know a little about CSS and have used the height and width properties quite a bit. What if you’ve began to fiddle with responsive web design and the simple width/height properties just don’t cut it? Let me introduce you to the max-width/max-height properties.

Like the width properties, max-width and max-height accept unit values, however the maximise size for an element is set rather than the fixed size. Let’s take a look at an example: 

div.parent {

    width: 500px;


div.parent div {

    width: 20%;

    height: 20%;

    max-width: 200px;

    max-height: 200px;


In the CSS above, notice the percentage values set for the child DIV elements of div.parent. What this is saying is the width/height value of 20% will be calculated based on the size of the parent element - in this case, div.parent. In saying this, there’s also a max-width/max-height value of 200px, meaning that even if the parent element width increases to say 10000px, the child DIV elements will only ever get to a maximum of 200px wide.

<div class="parent">

    <div>Some content herediv>


Lastly, if the element div.parent is set to 500px wide, all child DIV elements will be 20% in size of this, being 100px, and will never exceed 200px.