H153 - Exam Week 5

  1. Briefly explain why http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html works. [5 points]

    When an element is floated, it affects the width of the inline boxes of the elements that it floats next to. They are shortened just enough to make room for the floated element. In the demo, each image is more narrow than the one above, which allows the inline boxes to stretch out a little further, giving the curved feel to the text that mimics the images.

  2. Consider:

    <div style="border: 1px dotted red;">
    <img src="pic1.gif" style="float: left; margin-right: 0.66em;">
    My little red wagon.
    </div>

    What needs to be added to this markup fragment to ensure that the border stretches around the floated image? [5 points]

    The only thing I can figure out is to add a height attribute that is equal to the height of the image.

  3. Consider the following screenshot:
    Exam 5 No. 3
    Assuming the following document skeleton, what styles would place the "sidebar" and image as they are shown? [10 points]

    <body>
    <div id="sidebar">
    ...
    <img src="blah.gif">
    ...
    </div>
    ...
    </body>

    div#sidebar {float: right; width: 20%; border: thin solid gray; padding: 1em 0 1em 0; margin-left: 5%;}
    img { float: left; margin: 2% 5% 2% -15%;}

  4. Consider the following screenshot:
    Exam 5 No. 4
    Assuming the following document skeleton and a width of 25% for the "info" div, what styles would create the layout shown, including the thick double borders across the top of the layout? [15 points]

    <body>
    <div id="info">
    ...
    </div>
    <div id="main">
    ...
    </div>
    </body>

    body {border-top: thick double black;}
    div {margin-top: 1em;}
    #info {float: right; width: 25%;}
    #main {margin-right: 25%; padding-right: 5%; text-align: justify;}

  5. Consider the following markup skeleton:

    <body>
    <div id="nav">...</div>
    <div id="main">...</div>
    <div id="pictures">...</div>
    <div id="footer">...</div>
    </body>

    Write rules that will result in the following layout using float for some or all of the div elements shown in the skeleton without rearranging them. Use whatever widths seem appropriate to you. [25 points]
    Please note: height and negative margins should not be a part of the answer. I am not looking for a pixel perfect replication of the illustration, it's more the concept I am after. Your final solution should be able to contain variable amount of content, but still display similarly to what is shown in the illustration.
    Exam 5 No. 5

    div {border: thin solid black;}
    #nav {float: left; width: 33%; margin-bottom: 1%}
    #main {float: right; width: 66%; margin-bottom: 1%}
    #pictures {float: left; width: 33%;}
    #footer {clear: both;}

Jennifer Griner