Week 5 Practice Quiz

All floated elements must have at least one thing, but it's more important for non-replaced elements. What is it?
A width. Replaced elements use their intrinsic width by default, but non-replaced elements have no intrinsic width. They will tend toward zero width in conformant browsers if no width is defined.
Floated elements do not impact one kind of layout flow, but do impact another. What are they?
Floated elements do not affect the height of other elements directly. In other words, an float inside a paragraph will not force the paragraph to be taller. However, the overall layout of that paragraph can be affected because the flaot will affect the line boxes next to it. By making them shorter, it will cause more content to flow "downward" through the element, thus indirectly making it taller.
What happens to the borders and backgrounds of normal-flow elements placed next to floated elements? What ways are there to prevent this effect?
* They will "slide under" the floated element. You can use clear to move block-level elements below a float.
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?
The two elements will float next to each other (assuming that their parent element is wide enough for them to fit) with the first to the left of the second. The space between them will be 25 pixels.
Consider the following layout diagram and markup skeleton:
```
<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;}
```
One possible answer:
```
div#nav {float: left; width: 30%; margin: 0 1% 0 2%;}
div#main {float: none; width: 60%; margin: 0 7% 0 33%;}
```
This will leave open enough room for the "nav" div to float without impinging on the content of the "main" div.