Frontend Engineering, Volume II

CSS: Example 2b—Where Is Top, Left?

Create a Page

Use your template to create a new HTML page, with an <h1> that says you're looking for top, left.

Add the Markup

Add an outer <div>.

Add an inner <div>.

Style the `<div>`s

Use position: absolute; for both. Use borders and padding, all different sizes, all sides, for both. Contrasting colors will help you see your results. Experiment with your favorite border styles.

View the Result

Ours looks like this:

One div at the top, left corner of a containing div.

Experiment!

The chapter quiz will ask questions about the seemingly simple declaration { top: 0px }. This is only simple until you start to think about it!

Part of { top: 0px } refers to the selected element(s) and part to the container(s). top and 0px refer to either content, padding, border or margin areas of the selected element(s) or their container(s). Experiment with your example until you know what this declaration really means.

Good news: if you understand { top: 0px } you also understand { left: 0px }.

Example Code

If you get stuck building this example, take a look at our code. But don't use it as a crutch. Walk on your own.

<!DOCTYPE html>

<!-- frontend-engineering/knowits/v2/online/2/css-2b.html - example, box position -->

<html lang='en-us'>

    <head> <title>CSS Box Top, Left</title>
        <meta charset="UTF-8">
        <meta name="description" content="example, box position">

        <style type='text/css'>

        #container {
            background: #f0f0ff;
            border: #a0a0ff ridge 7px;
            height: 200px;
            left: 100px;
            padding: 15px;
            position: absolute;
            top: 100px;
            width: 300px;
        }

        #container2 {
            top: 400px;
        }

        #inside {
            background: #fff0f0;
            border: #ffa0a0 groove 5px;
            height: 50px;
            left: 0px;
            padding: 5px;
            position: absolute;
            top: 0px;
            width: 150px;
        }

        </style>
    </head>

    <body>

<h1>CSS 2b Box Top, Left</h1>

<div id='container'>
    <div id='inside'>
        Inside
    </div>
</div>

        <script type='text/JavaScript'>

        </script>
    </body>

</html>

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

Feedback: MartinRinehart at gmail dot com

# # #