Frontend Engineering, Volume II

CSS: Example 2d—Widths

© 2013, Martin Rinehart

You'll have to see this with your own example. It depends on your viewing it while dragging the side of your browser in and out. This screen shot shows the page inside some of the browser chrome.

Box with min and max widths specified.

Use your template to create a new page. Place a single div in the markup with some comments explaining the sizes.

Give it a width of 50%, 5px (or more) for the borders and 20px (or more) padding. Make it subject to minimum and maximum widths that you can view on your monitor. Ours is:

min-width: 200px;
max-width: 400px;

Drag a side border of your browser in and out until you see the minimum and maximum. As you drag you should get the distinct feeling that the width is more than the 50% you asked for. It is.

NEVER FORGET! The "width" in the CSS box model is the width of the content area. When you asked for 50% with 5 pixels for the border and 20 pixels for the padding, you really asked for 50% plus 50 pixels ( 5 + 20 on the left, 50% for content in the center, 20 + 5 on the right).

(Off topic.) Hover over this warning box. Those are CSS3 transitions and you'll be surprised when you find out how easy they are.

Using min-width and max-width will be critical when you get to CSS media queries used in "responsive" sites (sites you can view on a desktop, a phone or anything in between).

Again, our code is included, but this time, you shouldn't need it.

Feedback: MartinRinehart at gmail dot com

# # #