Issue
I'm trying to design a basic calendar layout using HTML/CSS. Another application would be an image gallery. The point is, I want to be able to set the row "width" in columns using just CSS, but it is not working.
This is the desired calendar look I'm trying to achieve with CSS:
NOTE: The most promising work-around I have found is to wrap an inline-block unordered list in a container div, and set the width of the div so that it gives you the desired row length. However, this is not a sufficient solution for my purposes. It doesn't address insert a line break to manually split rows.
My code
Version 1
This version of my calendar works, but it uses fixed <br> tags in the HTML, which doesn't allow for easily changing a number in the CSS to change the row width.
span.cell {
display: table-cell;
border-collapse: collapse;
height: 2.2em;
border: solid black 1px;
width: 30px;
}
span.cell:nth-child(8n+7) {
background-color: yellowgreen;
}
br {
content: "";
margin: 0;
}<span class='cell'>1 </span>
<span class='cell'>2 </span>
<span class='cell'>3 </span>
<span class='cell'>4 </span>
<span class='cell'>5 </span>
<span class='cell'>6 </span>
<span class='cell'>7 </span>
<br>
<span class='cell'>8 </span>
<span class='cell'>9 </span>
<span class='cell'>10 </span>
<span class='cell'>11 </span>
<span class='cell'>12 </span>
<span class='cell'>13 </span>
<span class='cell'>14 </span>
<br>
<span class='cell'>15 </span>
<span class='cell'>16 </span>
<span class='cell'>17 </span>
<span class='cell'>18 </span>
<span class='cell'>19 </span>
<span class='cell'>20 </span>
<span class='cell'>21 </span>
<br>
<span class='cell'>22 </span>
<span class='cell'>23 </span>
<span class='cell'>24 </span>
<span class='cell'>25 </span>
<span class='cell'>26 </span>
<span class='cell'>27 </span>
<span class='cell'>28 </span>
<br>
<span class='cell'>29 </span>
<span class='cell'>30 </span>
<span class='cell'>31 </span>Version 2
Version 2 attempts to accomplish the same using pure CSS, but so far, has been unsuccessful. Here are a few of the challenges with this attempt:
Here is the incorrect result I am getting with this version:
- The spans display inline even though I have display: table-cell set.
- Here we are using
span.cell:nth-child(8n):afterto insert a blank line, as per this post (but it isn't working): Line break (like <br>) using only css - Have tried Chrome, Firefox, and IE, all to no avail.
span.cell {
display: table-cell;
border-collapse: collapse;
height: 2.2em;
border: solid black 1px;
}
span.cell:nth-child(7n) {
background-color: yellowgreen;
}
span.cell:nth-child(8n):after {
content: "\a";
white-space: pre;
}
br {
content: "";
margin: 0;
}<div id="cal1">
<span class='cell' style='width:30px'>1 </span>
<span class='cell' style='width:30px'>2 </span>
<span class='cell' style='width:30px'>3 </span>
<span class='cell' style='width:30px'>4 </span>
<span class='cell' style='width:30px'>5 </span>
<span class='cell' style='width:30px'>6 </span>
<span class='cell' style='width:30px'>7 </span>
<span class='cell' style='width:30px'>8 </span>
<span class='cell' style='width:30px'>9 </span>
<span class='cell' style='width:30px'>10 </span>
<span class='cell' style='width:30px'>11 </span>
<span class='cell' style='width:30px'>12 </span>
<span class='cell' style='width:30px'>13 </span>
<span class='cell' style='width:30px'>14 </span>
<span class='cell' style='width:30px'>15 </span>
<span class='cell' style='width:30px'>16 </span>
<span class='cell' style='width:30px'>17 </span>
<span class='cell' style='width:30px'>18 </span>
<span class='cell' style='width:30px'>19 </span>
<span class='cell' style='width:30px'>20 </span>
<span class='cell' style='width:30px'>21 </span>
<span class='cell' style='width:30px'>22 </span>
<span class='cell' style='width:30px'>23 </span>
<span class='cell' style='width:30px'>24 </span>
<span class='cell' style='width:30px'>25 </span>
<span class='cell' style='width:30px'>26 </span>
<span class='cell' style='width:30px'>27 </span>
<span class='cell' style='width:30px'>28 </span>
<span class='cell' style='width:30px'>29 </span>
<span class='cell' style='width:30px'>30 </span>
<span class='cell' style='width:30px'>31 </span>
</div><!-- END #cal1 div -->What I've tried that hasn't worked
I found the following links in my search, but none of them provide a working solution (although many of them purported to or came close):
- Line break (like <br>) using only css
- Adding a line break between two inline elements | CoderWall
- Injecting a Line Break | CSS-Tricks
- An inline-block intervention | Really Good Work!
- Should You Use Inline-Blocks As A Substitute For Floats? | Vanseo Design
- How to break an inline-block row | CSS Creator
- How To Make a Calendar using CSS | W3Schools
My questions
- Is what I'm trying to do possible (split a row of spans or an unordered list without using a container div, or adding extra markup, using only CSS)? If not, why? If so, how?
