Template 3

Embedded style sheet

h2 {color: #330099; text-decoration: none;}
div {margin-bottom: 20px;}
div.left {background: #FFCC99; width: 100px; height: 100px;
padding-top: 40px; padding-left: 20px; margin-left: 20px; margin-top: 10px; margin-bottom: 0px;}
div.center {background: #CC0033; width: 100px; height: 100px;
padding-top: 40px; padding-left: 20px; margin-left: 90px; margin-top: -20px; margin-bottom: 0px;}
div.right {background: #FFFFCC; width: 100px; height: 100px;
padding-top: 40px; padding-left: 20px; margin-left: 180px;margin-top: -180px; margin-bottom: 100px;}
p.float {background: #FFCC99; width: 100px; height: 100px; margin-left: 200px;
padding-top: 35px; padding-left:20px; margin-top: 10px; font-size: x-large; clear: none;}

How to overlap several elements:

How

Are

You ?

used div class="left" then "center" then "right"

Floating where? Clearing How?

how.gif you.gif

Are

used: float left and then right for the 2 images

and then p class="float" for the text "are"

Borders: To resize or not to resize?

how.gif width= 150px

Are

width = 70%

you.gif height= 200px and width= 100px

Back to Homework weeek 3