H153 - Practice Quiz Week 5

  1. Floated elements do not impact one kind of layout flow, but do impact another. What are they?

    Floated elements impact relative layout flow, but not absolute.

    Floated elements impact the width of line boxes, but they do not directly impact the width or height of the actual elements.

  2. What happens to the borders and backgrounds of normal-flow elements placed next to floated elements? What ways are there to prevent this effect?

    Borders and background images of block level elements will be obscured by the float. Inline elements will not be affected, as their line box is shortened to make room for the float.
    One way to prevent this is to use a transparent background for the floated element.
    Another option is to use the clear property, so that any elements other than the containing element are moved to the bottom of the floated element.

  3. Consider the following styles:

    img#one {float: left; height: 50px; width: 40px; margin: 10px;}
    img#two {float: left; height: 35px; width: 35px; margin: 15px;}

    Now assume that we have the following situation in a document:

    <img src="woodee.jpg" id="one"><img src="hoosa.gif" id="two">

    How will the images be placed with respect to each other, and how much space will separate the outer edges of the two images' visible contents?

    Image two will be to the left of image one. There will be 25px between them, since margins do not collapse for floated elements.

  4. Consider the following layout diagram and markup skeleton:
    Quiz 5 No. 4

    Two divs, next to each other. Div#nav on the left side, and div#main to the right. div#main is 33% away from the left border of the viewport.

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

    Modify or add to, but do not delete anything from, the following styles such that the result will be as shown in the diagram. Note: you do not have to worry about element heights, but you should reproduce the horizontal separation between the elements and the left and right edges of the design area.

    div#nav {float: left;}
    div#main {float: none;}

    body {padding: 0; margin: 0;}
    div { border: 2px solid black; width: 100%; margin-top: 5px;}
    div#nav { float: left; width: 33%; height: 300px; margin-right: 5px; margin-left: 6px;}
    div#main { float: none; height: 600px; margin-right: 30px;}

Jennifer Griner