Frontend Engineering, Volume II

CSS: Example 2c—Corner Positioning

Ready for a challenge? This is the result you want:

Small boxes positioned in corners of a containing box.

Create a page that looks like ours. You be the artist, but get the inner divs precisely in the corners.

Again, we give you our code, but please write your own, looking at ours only when you get stuck.

<!DOCTYPE html>

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

<html lang='en-us'>

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

        <style type='text/css'>

        .boxes {
            background-color: #f8f4f0;
            border: brown double 5px;
            height: 50px;
            padding: 5px;
            position: absolute;
            width: 100px;
        }

        #box_tl {
            left: -5px;
            top: -5px;
        }

        #box_tr {
            right: -5px;
            top: -5px;
        }

        #box_bl {
            bottom: -5px;
            left: -5px;
        }

        #box_br {
            bottom: -5px;
            right: -5px;
        }

        #container, #container2 {
            background: #f0f0ff;
            border: #a0a0ff double 5px;
            height: 200px;
            left: 100px;
            padding: 5px;
            position: absolute;
            top: 100px;
            width: 300px;
        }

        </style>
    </head>

    <body>

<h1>CSS 2c Box Position</h1>

<div id='container'>
    <div id='box_tl' class='boxes'>
        top, left
    </div>

    <div id='box_tr' class='boxes'>
        top, right
    </div>

    <div id='box_bl' class='boxes'>
        bottom, left
    </div>

    <div id='box_br' class='boxes'>
        bottom, right
    </div>
</div> <!-- container2 -->

        <script type='text/JavaScript'>

        </script>
    </body>

</html>

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

Feedback: MartinRinehart at gmail dot com

# # #