Question: CSS/HTML I am working on a simple website with a calendar page. I already made each month as a table and I need to put
CSS/HTML
I am working on a simple website with a calendar page. I already made each month as a table and I need to put these tables into 2 columns. The issue is that the columns are uneven and I attached a screenshot below to show my problem. I want January - June on the left side and July-December on the right side. I am confused on how to do this.
The page also needs to be responsive and I want the two column layout to go to one column for mobile.
Each month is also supposed to have text listing important dates right next them. For example: 1st: New Years and 18:Martin Luther King Day should be next to the January table. When I try to put the text in the html code, I can never get the text to align properly. They were either below the tables or underneath them. I even tried tied putting all the text and calendar tables into one big table with four columns. I liked how it look, however I could not get this to be responsive since the table fell off the page in mobile view.
I would appreciate any help I can get. I attached my current CSS and html code. Also my assignment specifically says to use tables so I cannot use any javascript or arrays.
CSS
.Calendar, th,td{ color: black; border: 1px solid navy; background-color: #add8e6; border-collapse: collapse; margin-bottom:1%; margin-top:1%; }
.eventDay{ background-color:red; }
.column{ -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
@media screen and (max-width: 480px){ .column{ -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } }
HTML (I only posted two months since posting my entire code is too long)
| January 2021 | ||||||
|---|---|---|---|---|---|---|
| Sun | Mon | Tues | Wed | Thurs | Fri | Sat |
1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 | ||||||
| February 2021 | ||||||
|---|---|---|---|---|---|---|
| Sun | Mon | Tues | Wed | Thurs | Fri | Sat |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | ||||||
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help