CSS Minimum and Maximum Width and Height

This article will introduce you to the CSS properties min-width, min-height, max-width, and max-height.

This article was written by Aashni of Enchant Me Not and has been cross-posted from her website.

What do they do

min-height

min-height creates a minimum height for your div or content area. As you can see in the examples below, if the text stretches the box less than 150px high, the box will automatically be 150px, however as soon as you add more content, the height of the box stretches with the content. The divs below each have the CSS property min-height:150px

max-height

max-height works in the opposite direction to min-height. Instead of creating a minimum height the div or content area must be, this code creates a maximum. As you can see in the examples below, if the code is less than the maximum height of 120px, then the div wraps around it, however if the content passes 120px high, it gets cut off. The divs below each have the CSS property: max-height:120px

Of course, this looks messy, as the text spills out of the div. I will provide a solution later on in the article.

min-width

min-width creates a minimum width, hopefully you understand what that means by now. The examples below show a box that is less than the minimum width, and one that exceeds the minimum width. The elements below each contain the CSS property min-width:250px and instead of using divs, the examples below are tables because divs have a built in width:100% property.

They stretch across the whole page as they haven't been given a width to stop stretching at. In order to avoid this, we can include a max-width into the code, which shall be explained later in this article.

max-width

max-width creates a maximum width that a div can stretch too. As the examples below show us, if the code doesn't reach the maximum width, then it's all ok, however if the code does reach the maximum width, the content will be bumped onto the next line. The divs below each contain the CSS property max-width:250px

Combos to Solve Problems

These are the very basic structures and uses of the code, and some of them, like the max-height or the min-width have problems if they are used alone. Below are some combinations that you can use to avoid these problems.

While using a max-height, any content that exceeds the maximum height spills out of the div. In order to stop the text from spilling out of the div, as it looks really messy, you can pair the max-height with the "overflow:auto" function, which will create a scroll bar for the text to use when it exceeds the limit, as shown below. The div below contains the CSS properties: max-height:150px;overflow:auto

Another problem we faced earlier is the min-width problem. This is where you have created a minimum width the content must be in, however since there is no limit to the width, the div will stretch across the whole page. In order to avoid this problem, simply use a combination of the min-width and max-width properties, as shown below. All the lines in the first box contain less than 250px, as I have spaced them using the <br> code.

Try it out

These properties can prove incredibly useful in website designs. Give it a try! What other combinations have you used these properties with? Let us know in the comments.