Min/Max Width in IE 7

This page shows how Min and Max width CSS properties behave in IE7. The following style is applied to this page, the content of which all resides in a layer called content:

#content{
 width:100%;
 min-width:400px;
 max-width:800px;
}

What does this mean?

This especially useful when designing for large resolutions. You want your page to take up as much space as possible, but not too much, so you limit how wide it can be.

This bit is in a layer that is floated to the right and has a min-height of 500px;

Support for min-height is great for things like left-hand navigation panels with limited content, but which you want to have a consistent height, which can also grow to accommodate more. The CSS for this layer is:

#floater {
	float:right;
	min-height:500px;
	width:250px;
	background-color:red;
	color:white;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed orci. Curabitur bibendum varius est. Nunc sit amet ipsum nec nibh mattis feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus. Etiam molestie suscipit tortor. Praesent sed nulla et nunc pretium porttitor. Nulla eu pede ac ligula placerat tempor. Phasellus ut nulla nec nunc mollis aliquam. Nullam leo augue, suscipit ut, rhoncus sed, pulvinar vel, mi. Morbi malesuada, mauris eu dapibus aliquam, quam nisl ullamcorper eros, sit amet auctor felis augue eu nulla. In hac habitasse platea dictumst. Aenean eget quam. Nulla eget sem. Praesent cursus, diam sed posuere feugiat, eros leo vestibulum ante, ac gravida orci nibh in nunc.

Donec dignissim, risus in venenatis euismod, pede diam mollis enim, eget varius augue arcu ac odio. Vestibulum mauris. Donec et arcu blandit massa molestie facilisis. Vivamus faucibus, dolor ac gravida suscipit, orci augue commodo tortor, eget tempus augue tellus nec erat. Etiam mattis egestas mi. Nam quam nunc, facilisis ut, congue eget, semper vel, urna. Fusce lorem. Vestibulum viverra justo ac felis. Donec magna lorem, malesuada vitae, tempus id, tempor at, erat. Cras sed tellus in pede bibendum aliquet. Praesent elementum. Praesent velit. Aliquam dictum, sapien et scelerisque molestie, mi felis tincidunt dolor, in ornare odio nisi vitae orci. Suspendisse potenti.

Aenean feugiat, mauris at fermentum ultricies, quam eros blandit justo, ac blandit tortor nisi sed arcu. Fusce dapibus purus in risus. Cras vulputate. Sed sagittis fringilla dui. In quis felis. Mauris felis sem, ultrices a, aliquam sit amet, fermentum id, orci. In hac habitasse platea dictumst. Morbi commodo fermentum mi. In faucibus quam quis lacus. Maecenas libero massa, elementum id, condimentum vel, commodo ac, lorem. Ut pede. Nam enim arcu, molestie quis, sollicitudin quis, egestas a, lacus. Quisque nec tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin felis augue, fermentum vitae, pharetra mattis, luctus vitae, justo.

Mauris eu lacus in nisi venenatis ultricies. Suspendisse pulvinar. Quisque non ligula vel ipsum pretium lacinia. Suspendisse sit amet erat. Donec imperdiet blandit libero. Quisque convallis justo sed erat ullamcorper molestie. Curabitur nibh metus, vestibulum ut, aliquet eget, volutpat quis, nisl. Nunc facilisis porttitor purus. Morbi ac felis sed sapien euismod scelerisque. Nulla consectetuer, dolor ut congue molestie, nulla magna commodo libero, vitae semper dui arcu vel ante. Curabitur volutpat blandit libero. Nulla ac urna eget metus iaculis convallis. Aliquam posuere nibh sit amet nulla. Nullam convallis. Fusce mattis purus iaculis quam. Duis feugiat pede et velit. Maecenas id urna.

Maecenas sapien. Proin orci. Duis a sem vitae turpis tincidunt venenatis. Donec ornare tortor in turpis. Sed sollicitudin scelerisque purus. Nullam malesuada ipsum. Proin dolor sapien, fermentum quis, porta at, placerat ac, odio. Nulla dolor libero, suscipit malesuada, ullamcorper non, faucibus a, diam. Ut dictum libero non eros. Mauris sed tortor nec ipsum rutrum fermentum. Sed vestibulum sagittis quam.