Wichham's HTML & CSS tutorial <div> Study xxx - 149A_Div Study.html

Wichham's HTML and CSS tutorial about div boxes of position absolute, relative and fixed.

position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border

DivBoxes_1
This is a screenshot of the image in the referenced link. Note minor differences between the top panel, which is with code, and the lower panel is an image. The difference is due to the use of different font and size.


Next, I shall construct my own.

The position of this box is absolute. Top: 10px; left: 10px; width: 230px and height: 165px; background color is blue, text is yellow.
The position of this box is absolute. Top: 60px; left: 260px; width: 120px and height: 165px; background color is green, text is yellow. No height was specified.
The position of this box is absolute. Top: 60px; left: 400px; width: 370px and height: 105px; background color is lightgreen, text is indigo. The font is 18px;
.background2 { background-color: #ffe4e1; padding: 0; color: #335500;

These exercises are not related to the Castro book I am learning from.