I'm new-ish to flexbox and trying to vertically align my .calendar-arrow elements on the far left and right, respectively, within their own columns. I tried absolutely positioning them, but then they either sat outside of my 1280px margins or were too close to the margins and calendars. Ideally, I'd like to achieve a layout that includes the arrows in their own vertically aligned flexbox columns. For example, the left arrow should sit around the left 6 and the right arrow around the right 12.
* {
box-sizing: border-box;
}
section {
max-width: 1280px;
}
#event-calendar {
margin: 0 auto;
padding: 0 1%;
overflow: auto;
}
#event-calendar h1 {
padding-bottom: 15px;
text-align: center;
}
#event-calendar #calendar-left {
float: left;
border-right: 1px solid grey;
padding: 30px;
width: 50%;
height: 400px;
}
#event-calendar #calendar-right {
float: right;
padding: 30px;
width: 50%;
height: 400px;
}
#event-calendar .table .table-row .table-cell {
font-size: 2em;
color: grey;
}
#event-calendar .table .table-row.table-header .table-cell {
color: grey;
}
.table {
display: flex;
position: relative;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
position: relative;
}
.table .table-row .event-on::before {
position: absolute;
z-index: -9;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 100%;
width: 35px;
height: 35px;
content: '';
background-color: orange;
}
.calendar-arrow a {
font-size: 2em;
}
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="calendar-arrow">
<a class="icon-arrow-left" href="#">←</a>
</div>
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
<div id="calendar-right">
<div id="calendar-right-cont">
<h1>January 2017</h1>
<div class="table">
<div class="calendar-arrow">
<a class="icon-arrow-right" href="#">→</a>
</div>
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>
Pen: http://codepen.io/ourcore/pen/LbvvyG?editors=1100#0
Thanks!
Here's the code. since it's scss, so it won't run here. Here's the working pen
* {
box-sizing: border-box;
}
section {
max-width: 1280px;
}
#event-calendar {
margin: 0 auto;
padding: 0 1%;
overflow: auto;
h1 {
padding-bottom: 15px;
text-align: center;
}
#calendar-left {
float: left;
border-right: 1px solid grey;
padding: 30px;
width: 50%;
height: 400px;
}
#calendar-right {
float: right;
padding: 30px;
width: 50%;
height: 400px;
}
.table {
.table-row {
.table-cell {
font-size: 2em;
color: grey;
}
}
.table-row.table-header {
.table-cell {
color: grey;
}
}
}
}
.table {
display: flex;
position: relative;
flex-flow: column nowrap;
box-pack: justify;
// margin:0 auto;
justify-content: space-between;
// width: 96%;
height: 250px;
.table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
.table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.event-on {
position: relative;
&::before {
position: absolute;
z-index: -9;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 100%;
width: 35px;
height: 35px;
content: '';
background-color: orange;
}
}
}
}
.calendar-arrow {
a {
font-size: 2em;
// width:3%;
// position:absolute;
// top:45%;
}
}
.event-calendar{
// display:flex;
// flex-direction:row;
// align-items:center;
}
a.icon-arrow-left{
// left:2%;
}
a.icon-arrow-right{
// right:5%;
}
.table{
width:100%;
margin:0 auto;
}
.toFlex{
margin:0;
padding:0;
display:flex;
flex-direction:row;
}
.calendar-arrow{
width:35px;
flex-shrink:0;
align-items:center;
display:flex;
}
.toFlex1{
margin:0;
padding:0;
flex-grow:1;
flex-shrink:0;
}
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="toFlex">
<div class="calendar-arrow">
<a class="icon-arrow-left" href="#">←</a>
</div>
<div class="toFlex1">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="calendar-right">
<div id="calendar-right-cont">
<h1>January 2017</h1>
<div class="table">
<div class="toFlex">
<div class="toFlex1">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
<div class="calendar-arrow">
<a class="icon-arrow-right" href="#">→</a>
</div>
</div>
</div>
</div>
</div>
</section>
Related
I'm building a board with cards inside, just like Trello board.
The JSFiddle is here
Here is the code:
<div class="board-container">
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-content">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 2</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 3</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 4</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And stylesheet:
.board-container {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
overflow-x: auto;
overflow-y: hidden;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: 100%;
}
.cards {
height: 100%;
overflow-y: auto;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
display: inline-block;
height: 100%;
overflow: hidden;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
margin-right: 10px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
I cannot make my board scroll horizontally to see all card containers and vertically inside a card container.
Sometimes, as shown in fiddle, the containers get stucked one above another, and sometimes they scroll the whole page, not only the container.
.board-container {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
overflow-x: auto;
overflow-y: hidden;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: 100%;
}
.cards {
height: 100%;
overflow-y: auto;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
display: inline-block;
height: 100%;
overflow: auto;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
<div class="board-container">
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-content">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 2</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 3</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 4</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you have an issue with how your elements are nested. Elements with the class cards-container seem to be nested within other elements with the same class. See the fiddle.
.board-container {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
overflow-x: auto;
overflow-y: hidden;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: 100%;
}
.cards {
height: 100%;
overflow-y: auto;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
display: inline-block;
height: 100%;
overflow: hidden;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
margin-right: 10px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
/*Get rid of scrollbar from html */
html {
overflow-x: hidden;
}
/* Add vertical scroll to card container */
.card-container{
height: 50px;
overflow-y: scroll;
}
<div class="board-container">
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-content">
<div>
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
</div>
</div>
</div>
the html provided is a little messy but i think you need something like this :
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-container">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="card-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="card-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="card-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
</div>
</div>
<div class="board-content">content</div>
i didn't do much on css but it should be something like this :
body { overflow:hidden; }
.board-container {
padding: 0px;
margin: 0px;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
display: inline-block;
float: left;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: calc(100% - 300px);
}
.cards {
height: 100vh;
overflow-y: scroll;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
float: left;
display: inline-block;
height: 100%;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
margin-right: 10px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
See this pen
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
I'm trying to create the following table: but I need to use DIVs instead of tables. Structure I want to create:
I have to have 3 global Divs without using any table tag. I don't see how is it possible to do it without table tags, only divs here is what I tried codepen link
.wrapTableTech {
display: table;
width: 100%;
height: 14rem;
border: 2px solid;
}
.blocTech {
display: table-header-group;
background-color: gray;
}
.tech-cell {
display: table-cell;
text-align: justify;
padding: 10px;
border: 2pxsolid red;
text-align: center;
}
.blocCat {
display: table-row-group;
background-color: gray;
text-align: center;
}
.tech-row {
display: table-row;
border: 2px solid green;
}
<div class="wrapTableTech">
<div class="blocTech">
<div class=""></div>
<div class="tech-cell">Tech 1</div>
<div class="tech-cell">Tech 2</div>
<div class="tech-cell">Tech 3</div>
<div class="tech-cell">Tech 4</div>
</div>
<div class="blocCat">
<div class="tech-row">PTI</div>
<div class="tech-row">HO</div>
<div class="tech-row">OP</div>
<div class="tech-row">AS</div>
</div>
<div class="blocValue">
<div>1</div>
<div>4</div>
<div>6 hours</div>
<div>2</div>
</div>
</div>
Try below css and Html without bootstrap:
.wrapTableTech {
width: 100%;
border: 2px solid;
float: left;
width: 100%;
}
.blocTech {
background-color: gray;
float: left;
width: 20%;
}
.tech-cell {
text-align: justify;
padding: 10px;
border: 2px solid red;text-align:center;
}
.blocCat {
background-color: gray;
text-align: center;
float: left;
width: 80%;
}
.tech-row {
border: 2px solid green;
float: left;
width: 24%;
padding: 10px 0;
}
<div class="wrapTableTech">
<div class="blocTech">
<div class="tech-cell"> </div>
<div class="tech-cell">PTI</div>
<div class="tech-cell">HO</div>
<div class="tech-cell">OP</div>
<div class="tech-cell">AS</div>
</div>
<div class="blocCat">
<div class="blocvalue">
<div class="tech-row">Tech 1</div>
<div class="tech-row">Tech 2</div>
<div class="tech-row">Tech 3</div>
<div class="tech-row">Tech 4</div>
</div>
<div class="blocvalue">
<div class="tech-row">1</div>
<div class="tech-row">4</div>
<div class="tech-row">6 Hours</div>
<div class="tech-row">4</div>
</div>
<div class="blocvalue">
<div class="tech-row">2</div>
<div class="tech-row">5</div>
<div class="tech-row">3 Hours</div>
<div class="tech-row">2</div>
</div>
<div class="blocvalue">
<div class="tech-row">1</div>
<div class="tech-row">4</div>
<div class="tech-row">6 Hours</div>
<div class="tech-row">4</div>
</div>
<div class="blocvalue">
<div class="tech-row">2</div>
<div class="tech-row">5</div>
<div class="tech-row">3 Hours</div>
<div class="tech-row">5</div>
</div>
</div>
</div>
Try to understand that a div is a container.
Therefore, the structure must be hierarchical in order to solve this problem, but not separated into 3 different individual divs (=containers).
Try something like:
.wrapTableTech {
display: table;
width: 100%;
height: 14rem;
border: 2px solid;
}
.blocTech {
display: table-header-group;
background-color: gray;
}
.tech-cell {
display: table-cell;
text-align: justify;
padding: 10px;
border: 2px solid red;
text-align:center;
}
.blocCat {
display: table-row-group;
background-color: gray;text-align: center;
}
.tech-row {
display: table-row;
border: 2px solid red;
}
.tech-RowTitle {
display: table-cell;
text-align: justify;
padding: 10px;
border: 2px solid red;
text-align:center;
}
.tech-value {
display: table-cell;
text-align: justify;
padding: 10px;
border: 1px solid red;
text-align:center;
background-color: white;
}
<div class="wrapTableTech">
<div class="blocTech">
<div class="tech-cell"></div>
<div class="tech-cell">Tech 1</div>
<div class="tech-cell">Tech 2</div>
<div class="tech-cell">Tech 3</div>
<div class="tech-cell">Tech 4</div>
</div>
<div class="blocCat">
<div class="tech-row">
<div class="tech-RowTitle">PTI</div>
<div class="tech-value">1.1</div>
<div class="tech-value">1.2</div>
<div class="tech-value">1.3</div>
<div class="tech-value">1.4</div>
</div>
<div class="tech-row">
<div class="tech-RowTitle">HO</div>
<div class="tech-value">2.1</div>
<div class="tech-value">2.2</div>
<div class="tech-value">2.3</div>
<div class="tech-value">2.4</div>
</div>
<div class="tech-row">
<div class="tech-RowTitle">OP</div>
<div class="tech-value">3.1</div>
<div class="tech-value">3.2</div>
<div class="tech-value">3.3</div>
<div class="tech-value">3.4</div>
</div>
<div class="tech-row">
<div class="tech-RowTitle">AS</div>
<div class="tech-value">4.1</div>
<div class="tech-value">4.2</div>
<div class="tech-value">4.3</div>
<div class="tech-value">4.4</div>
</div>
</div>
</div>
.wrapTableTech {
display: table;
width: 100%;
height: 14rem;
border: 2px solid;
}
.blocTech {
display: table-header-group;
background-color: gray;
}
.tech-cell {
display: table-cell;
text-align: justify;
padding: 10px;
border: 2px solid red;text-align:center;
}
.blocCat {
display: table-row-group;
background-color: gray;text-align: center;
}
.tech-row {
display: table-row;
border: 2px solid green;
}
<div class=" row wrapTableTech">
<div class="blocTech">
<div class="col-sm-4"></div>
<div class="col-sm-2 tech-cell">Tech 1</div>
<div class="col-sm-2 tech-cell">Tech 2</div>
<div class="col-sm-2 tech-cell">Tech 3</div>
<div class="col-sm-2 tech-cell">Tech 4</div>
</div>
<div class="blocCat">
<div class="col-sm-2 blocValue tech-cell">PTI</div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
</div>
<div class="blocCat">
<div class="col-sm-2 blocValue tech-cell">HO</div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
</div>
<div class="blocCat">
<div class="col-sm-2 blocValue tech-cell">OP</div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
</div>
<div class="blocCat">
<div class="col-sm-2 blocValue tech-cell">AS</div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
<div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
</div>
</div>
I am trying to create something like so:
I am sure I am starting out wrong but I cannot see how else, plus I can't find anything online to help. My code so far is:
<div class="container">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
<div class="four">
four
</div>
<div class="five">
five
</div>
<div class="six">
six
</div>
</div>
And the css
.container {
background-color: blue;
display: flex;
}
.one {
height: 400px;
width: 30%;
background-color: red;
}
.two {
height: 250px;
width: 35%;
background-color: white;
}
.three {
height: 400px;
width: 35%;
background-color: lightblue;
}
The problem is that I cannot get the next set of divs to line up under correctly. Jsfiddle
Solution1: Why not you use Bootstrap, Thanks.
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-5">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
Solution2: Use Masonry Grid:
#container {
width: 100%;
max-width: 700px;
margin: 2em auto;
}
.cols {
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
.box {
margin-bottom: 20px;
}
.box.one {
height: 200px;
background-color: #d77575;
}
.box.two {
height: 300px;
background-color: #dcbc4c;
}
.box.three {
background-color: #a3ca3b;
height: 400px;
}
.box.four {
background-color: #3daee3;
height: 500px;
}
.box.five {
background-color: #bb8ed8;
height: 600px;
}
.box.six {
background-color: #baafb1;
height: 200px;
}
<div id="container" class="cols">
<div class="box one"></div>
<div class="box two"></div>
<div class="box one"></div>
<div class="box three"></div>
<div class="box two"></div>
<div class="box five"></div>
<div class="box one"></div>
<div class="box two"></div>
<div class="box six"></div>
<div class="box three"></div>
<div class="box two"></div>
</div>
I'm new-ish to Flexbox and trying to build a responsive table-based calendar with round background colors on certain cells. The problem I'm encountering is that since each cell's width is dynamic and on wider (most) screen sizes, the backgrounds are ovals, not circles. How can I set them as circles without disturbing the current layout or using fixed sizes?
As a bonus, I'd also like to be able to dynamically align the date/year with the far-left column.
CSS:
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
border-radius: 100%;
background-color: grey;
}
Markup:
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>
Pen: http://codepen.io/ourcore/pen/rWbjYZ.
Thanks!
Added a pseudo element and add some styling to it.
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
border-radius: 100%;
position: relative;
}
div.table-cell.event-on::before {
content: '';
width: 25px;
height: 25px;
background-color: grey;
position: absolute;
z-index: -9;
left: 10px;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
border-radius: 13px;
}
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>
Used a <span> and ...
<s> for past days
<i> for event
<b> for important event
Changed .table-cell flex-flow to column nowrap and added align-items:center
CODEPEN