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.
Yawn! Daylight time begins.
Hurrah! Spring begins!
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>