Calendar for March 2021

Place the pointer on a special date, and click the arrow for information.

This page doestn't have to be a calendar and illustrates chiefly the use of the float property and the clear property. There is an easier way to do this using flex-boxes.



March
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Event

Yawn! Daylight time begins.

15
16
17
18
19
20
Event

Hurrah! Spring begins!

21
22
23
24
25
26
27
28
29
30
31

Below is the HTML to generate this page as shown above. Values assigned to margins, dimensions, borders, colors, are arbitrary.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Calendar--Test</title>

<style>

<style type="text/css">

html {background-color: #CCCCCC;}

body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; background-color: #CCCCCC; font-family: Arial, Times, sans-serif; font-size: 20px;}

content {margin:10px 10px 30px 170px; display:block; width: auto; height: auto; border: none; background: transparent; padding:10px;} .

boxlet {float: left; padding-top: 28px; border: 1px solid #000000; background-color: #FFFFFF; width: 11%; height: 8%; min-height: 48px; text-align: center;}

.boxletspec {float: left; padding-top: 28px; border: 1px solid #000000; background-color: #FFFF00; width: 11%; height: 8%; min-height: 48px; text-align: center;}

.boxlet1 {float: left; padding-top: 8px; border: 1px solid #000000; background-color: #FFFFFF; width: 11%; height: 5%; text-align: center; font-weight: bold;}

.boxlet2 {width:78%; height: 7%; min-height: 1.em; text-align: center; background-color: blue; color: yellow; font-size: 20pt;}

.boxlet3 {clear: both; width: 3%; background-color: transparent;}

h1 {text-align: center; font-size: 1.6em; font-weight: bold;}

h1#left {text-align: left; font-size: 1.6em; font-weight: bold;}

h2 {text-align: center; font-size: 1.5em; font-weight: bold;}

h2#left {text-align: left; font-size: 1.6em; font-weight: bold;}

h3 {text-align: center; font-size: 1.4em; font-weight: bold;}

nav {display: block; top: 10px; left: 2px; width: 145px; height: 200px; position: fixed; border: 1px solid #888; padding: 5px; text-align: center; font-size: 24px; font-weight: bold; color: #FFFFFF;}

nav a:visited, nav a {display:block; width:140px; height: auto; margin:0 auto; border-top: none; border-bottom: none; text-align: left; text-decoration: none; line-height: 20px; color: #000000;}

nav a:hover {background:#AAAAAA; color:#FFFFFF;}

</style>

</head>

<body>

<content>

<h3>Calendar for March 2021</h3>

<div style= "text-align: center">Place the pointer on a special date, and click the arrow for information.

<p style= "text-align: left; margin-right: 20%;">This page doestn't have to be a calendar and illustrates chiefly the use of the float property and the clear property. There is an easier way to do this using flex-boxes.</div> <br>

<div class= "boxlet2">March</div>

<div class= "boxlet1">Sun</div><div class= "boxlet1">Mon</div><div class= "boxlet1">Tue</div><div class= "boxlet1">Wed</div> <div class= "boxlet1">Thu</div><div class= "boxlet1">Fri</div><div class= "boxlet1">Sat</div> <div class= "boxlet3"></div>

<div class= "boxlet"></div><div><div class= "boxlet"> 1</div><div class= "boxlet"> 2</div> <div class= "boxlet"> 3</div><div class= "boxlet"> 4</div><div class= "boxlet"> 5</div> <div class= "boxlet"> 6</div><div class= "boxlet3"></div>

<div class= "boxlet"> 7</div><div class= "boxlet"> 8</div><div class= "boxlet"> 9</div> <div class= "boxlet"> 10</div><div class= "boxlet"> 11</div> <div class= "boxlet"> 12</div><div class= "boxlet"> 13</div><div class= "boxlet3"></div>

<div class= "boxletspec"><span class= "special"> 14<br><details><summary>Event</summary><p>Yawn! Daylight time begins.</details></div><div class= "boxlet"> 15</div><div class= "boxlet"> 16</div> <div class= "boxlet"> 17</div><div class= "boxlet"> 18</div><div class= "boxlet"> 19</div> <div class= "boxletspec"><span class= "special"> 20<br><details><summary>Event</summary><p>Hurrah! Spring begins!</details></div><div class= "boxlet3"></div>

<div class= "boxlet"> 21</div><div class= "boxlet"> 22</div> <div class= "boxlet"> 23</div><div class= "boxlet"> 24</div><div class= "boxlet"> 25</div> <div class= "boxlet"> 26</div><div class= "boxlet"> 27</div><div class= "boxlet3"></div>

<div class= "boxlet"> 28</div><div class= "boxlet"> 29</div><div class= "boxlet"> 30</div> <div class= "boxlet"> 31</div><br>

</content>

<nav>

<p><a href="index.html">Index</a>

<p style= "padding-top: 40px;"><a href= "https://johnandval.org"><img src= "jfa.ico" width= "50px" alt= "Alexander Icon"></a>

</nav>

</body>

</html>