Frontend Engineering, Volume II

CSS: Example 2d—Widths

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.

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.

<!DOCTYPE html>

<!-- frontend-engineering/knowits/v2/online/2/css-2d.html - example, widths -->

<html lang='en-us'>

    <head> <title>CSS 2d Widths</title>
        <meta charset="UTF-8">
        <meta name="description" content="example, box position">

        <style type='text/css'>

            #container {
                background: #f0f0ff;
                border: #a0a0ff ridge 5px;
                height: 200px;
                left: 100px;
                max-width: 400px;
                min-width: 200px;
                padding: 20px;
                position: absolute;
                top: 100px;
                width: 50%;
            }

        </style>
    </head>

    <body>

<h1>CSS 2d Widths</h1>

<div id='container'>

width >= 200px, = 50%, <= 400px
<br>
Drag browser side to resize.

</div> <!-- container2 -->

    </body>

</html>

<!-- end of frontend-engineering/knowits/v2/online/2/css-2d.html -->

Feedback: MartinRinehart at gmail dot com

# # #