Positioning: The Final Frontier

Now that we can make our div containers into any shape we want,  the next step is to arrange those shapes around the page. We do that by positioning. Here are the CSS properties you’ll need to know:

positionType of positioning
Possible Values:

  • absolute – positioned relative to parent container block
  • relative – positioned relative to its normal position
  • eg. position: absolute;

    leftSet the element’s left edge position
    eg. left: 10px;
    topSet the element’s top edge position
    eg. top: 10px;
    rightSet the element’s right edge position
    eg. right: 10px;
    bottomSet the element’s bottom position
    eg. bottom: 10px;
    z-indexSet the element’s stack position:
    In case two elements overlap in the wrong way, simply set the z-index of the hidden element to a higher number until it appears OVER the other element.
    eg. z-index: 10;

    One last thing: /*Comments*/

    Sometimes you need a way to leave yourself and others helpful “comments” in your CSS file.  Anything “commented out” is invisible as CSS.  All you have to do is sandwich whatever you don’t want seen in between /* and */.
    eg.
    this line will be seen
    /* this line will be commented out.
    So will this line.
    Nope, won’t see this line either */
    and we’re back.

    Exercise: The standard webpage layout

    Ok, we’ve dumped a lot of theory on you, so it’s finally time to see some action!  We are now going to replicate the modern standard page layout: a header for our logo and navigation, sidebar for our links, and place for our primary content. 99% of your future pages will probably use some version of this page as its template. By the way, when creating a new page layout, we encourage sketching your page on paper first just to help visualize how all the DIVs should be laid out.  Here is our sketch of the layout we want to create:

    testtemplate

    Notes:

    Inside index.html

    Our first step is to adjust our html. Simply make sure you add the lines highlighted below to your main  index.html file.

    <html>

    <head>

    <title>template page</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    </head>

    <body>

    <div id="header">I’m a header!</div>

    <div id="content">Put your content here!</div>

    <div id="sidebar">Side up to the bar!</div>

    </body>

    </html>

    Inside style.css

    Here’s where the magic happens. Replace anything in your style.css file with these lines. All we are doing here is setting the dimensions and positions of our three container divs.

    div#header {

    height: 200px;
    width: 100%;
    background-color: #189A98;   /* aqua */

    /*

    the header should already be in the right spot
    (at the very top) so we can skip manually
    positioning it.

    */

    }

    div#sidebar {

    height: 100%;
    width: 20%;
    background-color: #8080FF;  /* violet */

    position: absolute;
    right: 0px;
    top: 210px;

    }

    div#content {

    height: 100%;
    width: 75%;
    background-color: #F8BF24;  /* yellow */

    position: absolute;
    left: 0px;
    top: 210px;

    }

    Notes:

    If you’ve followed all the instructions, you should now have a page that looks quite similar to the initial sketch we did above. Congratulations! You’ve reached the end of this lesson!

    Prev Page: Divs and Spans
    Next Page: Super Styles Quiz Time