Min- and max-width. Min- and max-height - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

87
Min- and max-width
Min- and max-height

Suppose you’ve styled a div to occupy 20% of the width of the screen. This works fine as long as the screen is large, but what happens on a phone with a 320-pixel screen? The div width shrinks to 64 pixels—a narrow stripe down the page with room for one or two words per line. To prevent this, you specify a min-width.

div#additional-info {
width: 20%;
min-width: 200px;
}

Now the div will run 20% of the width of the screen—but only as long as the width doesn’t go below 200 pixels. When that point is reached, your CSS tells the browser to make the width 200 pixels.

Then there’s the opposite problem. You’ve created a div that runs 40% of the width of the screen. A block of text inside this div might measure a user-friendly 12 to 14 words wide. But when the same page is displayed on an oversize screen, it could stretch to 20 words wide. That’s too wide for easy reading. So you specify a max-width.

div#main {
width: 40%;
max-width: 500px;
}

Now, on a wide screen, the width will shrink to 500 pixels when 40% translates into more than 500 pixels.

You can also establish limits on height, using max-height and min-height.

p.article {
min-height: 150px;
max-height: 600px;
}

A problem occurs when the content of an element exceeds the max-height that you’ve specified for the element. In the example above, you tell the browser to limit the paragraph to a height of 600 pixels. If the text in the paragraph runs, say 750 pixels high, the text overflows, potentially creating a mess. You solve this with overflow: hidden or overflow: scroll.

In the following example, you tell the browser to make any overflowing content invisible.

p.article {
min-height: 150px;
max-height: 600px;
overflow: hidden;
}

In the following example, you tell the browser to display a scroll bar that allows the user to scroll down to any overflow.

p.article {
min-height: 150px;
max-height: 600px;
overflow: scroll;
}

1. In your CSS file, code a class of paragraph with a max-width of 100 pixels and a max-height of 100 pixels. Make the overflow scroll.

2. In your HTML file, code a paragraph of that class, including at least a dozen words.

3. Save the files. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-87-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-87-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/87.html