Line Break Row at Nth Column Using CSS Only for Calendar or Image Gallery

Stackoverflow answer

by James Wassinger

HTML

<span class="day">1</span>
<span class="day">2</span>
<span class="day">3</span>
<span class="day">4</span>
<span class="day">5</span>
<span class="day">6</span>
<span class="day colored">7</span>
<div class="clear"></div>
<span class="day">8</span>
<span class="day">9</span>
<span class="day">10</span>
<span class="day">11</span>
<span class="day">12</span>
<span class="day">13</span>
<span class="day colored">14</span>
<div class="clear"></div>
<span class="day">15</span>
<span class="day">16</span>
<span class="day">17</span>
<span class="day">18</span>
<span class="day">19</span>
<span class="day">20</span>
<span class="day colored">21</span>
<div class="clear"></div>
<span class="day">22</span>
<span class="day">23</span>
<span class="day">24</span>
<span class="day">25</span>
<span class="day">26</span>
<span class="day">27</span>
<span class="day colored">28</span>
<div class="clear"></div>
<span class="day">29</span>
<span class="day">30</span>
<span class="day">31</span>

CSS

.day {
  float: left;
  display: table-cell;
  border-collapse: collapse;
  height: 2.2em;
  border: solid black 1px;
  width: 30px;
}

.colored {
  background: #8AC627;
}
.clear {
  clear: both;
}