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?
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?
width= 150px
Are
width = 70%
height= 200px and width= 100px