title: CSS Calendar alignments
body: <p>I am new to CSS, building this calendar i made this, i need this calendar to fit into a JSP page.  </p>
  
  <ol>
  <li>This spans the whole page. can anyone suggest how to make resizable</li>
  <li>Also when i have to make boxes empty to move the 1st of the month to
  the day of the week as the boxes move up and down. What can be done
  to fix that</li>
  <li>Is there a better way to do this, need this a in this way with tool
  tip. Thanks for looking.</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  ul {
    list-style-type: none;
  }
  
  body {
    font-family: Verdana, sans-serif;
  }
  
  .month {
    padding: 70px 25px;
    width: 100%;
    background: #1abc9c;
  }
  
  .month ul {
    margin: 0;
    padding: 0;
  }
  
  .month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
  }
  
  .month .prev {
    float: left;
    padding-top: 10px;
  }
  
  .month .next {
    float: right;
    padding-top: 10px;
  }
  
  .weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #ddd;
  }
  
  .weekdays li {
    display: inline-block;
    width: 13.6%;
    color: #666;
    text-align: center;
  }
  
  .days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
  }
  
  .days li {
    list-style-type: none;
    display: inline-block;
    width: 13.6%;
    height: 75px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 17px;
    border: 3px solid #73AD21;
    color: #777;
  }
  
  .days li .active {
    padding: 5px;
    background: #1abc9c;
    color: white !important
  }
  
  
  /* Add media queries for smaller screens */
  
  @media screen and (max-width:720px) {
    .weekdays li,
    .days li {
      width: 13.1%;
    }
  }
  
  @media screen and (max-width: 420px) {
    .weekdays li,
    .days li {
      width: 12.5%;
    }
    .days li .active {
      padding: 2px;
    }
  }
  
  @media screen and (max-width: 290px) {
    .weekdays li,
    .days li {
      width: 12.2%;
    }
  }
  
  .tooltip {
    position: relative;
    display: inline-block;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
  }
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head/&gt;
  
  &lt;body&gt;
  
    &lt;h1&gt;CSS Calendar&lt;/h1&gt;
  
    &lt;div class="month"&gt;
      &lt;ul&gt;
        &lt;li class="prev"&gt;&amp;#10094;&lt;/li&gt;
        &lt;li class="next"&gt;&amp;#10095;&lt;/li&gt;
        &lt;li style="text-align:center"&gt;
          August&lt;br&gt;
          &lt;span style="font-size:18px"&gt;2016&lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;ul class="weekdays"&gt;
      &lt;li&gt;Mo&lt;/li&gt;
      &lt;li&gt;Tu&lt;/li&gt;
      &lt;li&gt;We&lt;/li&gt;
      &lt;li&gt;Th&lt;/li&gt;
      &lt;li&gt;Fr&lt;/li&gt;
      &lt;li&gt;Sa&lt;/li&gt;
      &lt;li&gt;Su&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul class="days"&gt;
      &lt;li&gt;&amp;nbsp;&lt;/li&gt;
      &lt;li&gt;1&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;2&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;3&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;4&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;5&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;6&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;7&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;8&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;9&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;10&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;11&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;12&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;13&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;14&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;15&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;16&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;17&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;18&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;19&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;20&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;21&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;22&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;23&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;24&lt;br&gt;&lt;br&gt;$1.25
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="tooltip"&gt;25&lt;br&gt;&lt;br&gt;$1.25
          &lt;span class="tooltiptext"&gt;Plan One:$1.25&lt;br&gt;Plan Two: $2.34&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="tooltip"&gt;26&lt;br&gt;&lt;br&gt;$1.25
          &lt;span class="tooltiptext"&gt;Plan One:$1.25&lt;br&gt;Plan Two: $2.34&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="tooltip"&gt;27&lt;br&gt;&lt;br&gt;$1.25
          &lt;span class="tooltiptext"&gt;Plan One:$1.25&lt;br&gt;Plan Two: $2.34&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="tooltip"&gt;28&lt;br&gt;&lt;br&gt;$1.25
          &lt;span class="tooltiptext"&gt;Plan One:$1.25&lt;br&gt;Plan Two: $2.34&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="tooltip"&gt;29&lt;br&gt;&lt;br&gt;$1.25
          &lt;span class="tooltiptext"&gt;Plan One:$1.25&lt;br&gt;Plan Two: $2.34&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="tooltip"&gt;30&lt;br&gt;&lt;br&gt;$1.25
          &lt;span class="tooltiptext"&gt;Plan One:$1.25&lt;br&gt;Plan Two: $2.34&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="tooltip"&gt;31&lt;br&gt;&lt;br&gt;$1.25
          &lt;span class="tooltiptext"&gt;Plan One:$1.25&lt;br&gt;Plan Two: $2.34&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>