CSS Minimum and Maximum Width and HeightWritten by: Aashni | 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 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 50px high, the box will automatically be 50px, 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:50px"




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 75px, then the div wraps around it, however if the content passes 75px high, it gets cut off. The divs below each have the CSS property: "max-height:75px"




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 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:200px" and instead of using divs, the examples below are tables because divs have a built in "width:100%" property.

This is less than 200px.

This div contains content that exceeds the 200px max-width that was set, and so it spills out of the div. Rufe na sute cerve. Nasus Tous Rube Stat. Ino si vera dicum. Nasus Tous Rube Stat. Lorem Ipsum. Rufe na sute cerve. Nasus Tous Rube Stat. Ino si vera dicum. Nasus Tous Rube Stat. Lorem Ipsum. Rufe na sute cerve. Nasus Tous Rube Stat. Ino si vera dicum. Nasus Tous Rube Stat. Lorem Ipsum.

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 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:200px"




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:50px;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 200px, 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.

   

| Written by: Aashni | Added: Jul 2 2010 | Last Modified: Aug 1 2010 | Views: 1,287 | (Log in to rate) |

User Comments