I have a 'calendar' layout using the following css-grid styles:
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1.5em 1.5em repeat(6, 1fr);
width: 100%;
height: 100%;
}
(Codepen https://codepen.io/joelhoward0/pen/vJLmWK)
The first two rows are a 'controls' header and days of the week headers, followed by divs for each day in the month:
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
Each day has a .header and .content div. I want the .header div to take up 1/5 of the height of the row, and the content to take up 4/5 and scroll if the content overflows.
However, any combination of styles I've tried just leads to .content growing, shrinking the other grid rows to compensate. I assume this is due to the use of 1fr on the container grid-template-rows.
Is it possible to achieve a max height of 4/5 of the grid row height, which is 1/6 of the vertical space available, on the .content div?
(Note: setting overflow-y: auto; on .day achieves what I want, but the header is included in the scrolling area. Setting overflow-y: auto; on .content doesn't seem to do anything.)
Although #MichaelB's response is technically correct, I have found that you can actually do it without resorting to specifying heights manually. And it's dead simple to do it too.
In addition to adding overflow:auto to the grid-item you want scrollbars on, you also need to add an overflow:auto to the parent of that grid-item.
https://codepen.io/kumarharsh/pen/jejGMm?editors=1100
html,
body {
height: 100%;
}
body {
position: relative;
margin: 0;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1.5em 1.5em repeat(6, 1fr);
width: 100%;
height: 100%;
box-sizing: border-box;
border: solid grey;
border-width: 1px 0 0 1px;
position: relative;
}
.dayHeader {
border: solid grey;
border-width: 0 1px 1px 0;
}
.day {
border: solid grey;
border-width: 0 1px 1px 0;
overflow: auto; /* added overflow here! */
}
.content {
overflow-y: auto;
}
.controls {
grid-column-start: 1;
grid-column-end: 8;
border: solid grey;
border-width: 0 1px 1px 0;
}
<div class="calendar">
<div class="controls">July 2017</div>
<div class="dayHeader">Sunday</div>
<div class="dayHeader">Monday</div>
<div class="dayHeader">Tuesday</div>
<div class="dayHeader">Wednesday</div>
<div class="dayHeader">Thursday</div>
<div class="dayHeader">Friday</div>
<div class="dayHeader">Saturday</div>
<div class="day">
<div class="header">25</div>
<div class="content">
this is a lot of content that I want to have scroll instead of just stretching the grid row and forcing the other rows to be smaller to compensate for this one's increased size due
</div>
</div>
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">27</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">28</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">29</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">30</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">1</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">2</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">3</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">4</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">5</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">6</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">7</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">8</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">9</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">10</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">11</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">12</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">13</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">14</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">15</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">16</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">17</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">18</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">19</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">20</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">21</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">22</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">23</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">24</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">25</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">27</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">28</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">29</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">30</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">31</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">1</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">2</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">3</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">4</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">5</div>
<div class="content"></div>
</div>
</div>
Best of all, It works in all browsers (tested in Firefox, Chrome, and Edge), so it's likely not a hack, but an intended behaviour.
Why does this happen?
I can't find a clear answer in the spec yet, but I'll keep looking and update here when I have something concrete.
Update
Do read #Victoria's followup comment: CSS Grid row max height 1fr, scroll content which has another way to do it - I'd recommend you use that way if your design allows it.
Each row in the grid (except for the headers) is set to 1fr height. That means each row will consume an equal proportion of free space in the container.
Just note that fr sizing doesn't actually define a length – either width or height. With fr you are simply distributing free space.
But for the overflow property to work, an actual height must be defined:
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Therefore, consider using actual heights as opposed to space distribution. Here's an example:
html,
body {
height: 100%;
}
body {
position: relative;
margin: 0;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1.5em 1.5em repeat(6, 175px); /* adjusment */
width: 100%;
height: 100%;
box-sizing: border-box;
border: solid grey;
border-width: 1px 0 0 1px;
position: relative;
}
.dayHeader {
border: solid grey;
border-width: 0 1px 1px 0;
}
.day {
height: 175px; /* new */
border: solid grey;
border-width: 0 1px 1px 0;
}
.header { /* new */
height: 20%;
background-color: yellow;
}
.content {
height: 80%; /* new */
overflow-y: auto;
background-color: aqua;
}
.controls {
grid-column-start: 1;
grid-column-end: 8;
border: solid grey;
border-width: 0 1px 1px 0;
}
<div class="calendar">
<div class="controls">July 2017</div>
<div class="dayHeader">Sunday</div>
<div class="dayHeader">Monday</div>
<div class="dayHeader">Tuesday</div>
<div class="dayHeader">Wednesday</div>
<div class="dayHeader">Thursday</div>
<div class="dayHeader">Friday</div>
<div class="dayHeader">Saturday</div>
<div class="day">
<div class="header">25</div>
<div class="content">
this is a lot of content that I want to have scroll instead of just stretching the grid row and forcing the other rows to be smaller to compensate for this one's increased size due
</div>
</div>
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">27</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">28</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">29</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">30</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">1</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">2</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">3</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">4</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">5</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">6</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">7</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">8</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">9</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">10</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">11</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">12</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">13</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">14</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">15</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">16</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">17</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">18</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">19</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">20</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">21</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">22</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">23</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">24</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">25</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">27</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">28</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">29</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">30</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">31</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">1</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">2</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">3</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">4</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">5</div>
<div class="content"></div>
</div>
</div>
revised demo
It looks like if you set the header to position: fixed, set calc(100%/7) and give it a non-transparent background. Set .day to overflow-y:auto and give your .content a margin-top that seems to work as well as keeping the calender fluid to the browser height.
If it's important for the header to be the full width of the day block with borders you can add your current border properties to only the right side and add box-sizing: border-box
.header{
position:fixed;
background: white;
width: calc(100%/7);
border: solid grey;
border-width: 0 1px 0 0;
box-sizing: border-box;
}
.day {
border: solid grey;
border-width: 0 1px 1px 0;
overflow-y: auto;
}
.content {
margin-top: 20px;
}
Demo
Related
I have an HTML structure like this:
<div class="row">
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
</div>
where class 'row' has width: 100% of its parent and the parent width will change over time.
My goal is that the two divs with a "half-row" class must be in-line and occupy 50% of the "row" div. If the size of the "row" div goes below 640px (so the half-row will be < 320px) the two half-row class divs have to stack and each of them occupies 100% of the available space.
In both cases, the internal div ("cell" class) must equally divide the available space.
Every suggestion is welcome. Thank you
#S.C. is right, flexbox is the way to go and I would also recommend reading the CSS-tricks article! In fact I have used this very same article to construct this alternative example, that's independent of the screen-width:
.row, .half-row {
display: flex;
}
.row {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
.half-row {
width: 320px;
flex-grow: 1;
justify-content: space-around;
/* for seeing better what's going on */
background-color: #aaa;
border: 1px solid #333;
}
<div class="row">
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
</div>
You can use flexbox for that.
See excellent article from Css-tricks about Flexbox
If you want to tell us more about the cell class who need to divide the available space "equally" (Horizontally ? Vertically ? both ? Squared ? etc.) I'll update my code to fit with your needs.
I Hope this could help you.
.row {
display: flex;
width: 100%;
flex-flow: row wrap;
}
.half-row {
display: flex;
flex-flow: row; /* or column */
flex-basis: 100%;
/* remove after tests */
background-color: red;
height: 500px;
}
.cell {
flex-basis: 100%;
/* remove after tests */
background-color: blue;
}
#media screen and (min-width: 640px) {
.half-row { flex-basis: 50%; }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="row">
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
</div>
</body>
</html>
I have div to look like table, this is my code:
.cell {
border: 1px solid red;
display: table-cell
}
.tableLike {
padding-bottom: 30px;
display: table
}
.rowLike {
display: table-row
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
Now all the the columns are in different width, and I don't know why. I want that div get different width but synchronize.
using display:table like this
.tableLike{width:100%;display:table;}
.cell{border:1px solid red;display:table-cell;}
.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 15%;}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
Add the correct display styles:
.cell {
border: 1px solid red;
display: table-cell;
}
.tableLike {
padding-bottom: 30px;
display: table;
}
.rowLike {
display: table-row;
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 33%;}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
I will do like this.
You can try, but it may not be the best answer.
.cell {
border-right:1px solid red;
border-bottom:1px solid red;
display: table-cell
}
.tableLike {
padding-bottom: 30px;
display: table
}
.rowLike {
display: table-row
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
.rowLike:nth-child(1) .cell:nth-child(1),
.rowLike:nth-child(1) .cell:nth-child(2),
.rowLike:nth-child(1) .cell:nth-child(3){
border-top:1px solid red;
}
.rowLike:nth-child(1) .cell:nth-child(1),
.icon-close{
border-left:1px solid red;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
I am trying to make a grid of responsive squares, which would look similar to a squared paper. I used a pre-prepared solution, which I tried to adopt to my purpose. My HTML code looks like this (example grid of 4*4 squares):
.square {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
margin: 0%;
overflow: hidden;
}
.content {
position: absolute;
height: 100%;
width: 100%;
padding: 0%;
}
.table {
display: table;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
border: thin solid black;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
The grid is OK in Firefox. But when I look at it in Chrome, it displays two lines between second and third row (and between second and third column) instead of one. I tried to set .square background-color to black. It worked partially, but the line in question looks thicker than the others. Is there a batter solution?
There is no proper solution for this. Seems like Chrome rounds off widths on display: table but not on display: block. Slight change of markup produces consistent result:
.square {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
margin: 0%;
overflow: hidden;
}
.content {
position: absolute;
height: 100%;
width: 100%;
padding: 0%;
}
.table {
/* removed display table */
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}
.table-cell {
/* removed display table-cell */
vertical-align: middle;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
border: thin solid black;
/* added */
box-sizing: border-box;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
I guess your problem ist, that you have display:table and thus have double-borders inside yuor table. You can fix that with border-collapse:collapse inside your .table class.
Here's a working fiddle, no more thik lines, noe double borders in chrome: https://jsfiddle.net/Hoargarth/kh7fyegk/
Edit: I forgot to mention, that i also changed border: thin solid black; to border: 1px solid black; inside the fiddle, to remove the thick lines in chrome.
add border-collapse: collapse; in table class
.square {
float:left;
position: relative;
width: 25%;
padding-bottom : 25%;
margin:0%;
overflow:hidden;
}
.content {
position:absolute;
height:100%;
width:100%;
padding: 0%;
}
.table{
display:table;
height:100%;
width:100%;
padding: 0%;
margin: 0%;
border-collapse: collapse;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
padding: 0%;
margin: 0%;
border: thin solid black;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
If you remove the position: relative from the .square and add the height to .content does it solve your problem ?
My page contains a collection of elements, each element is a fixed height row. Within the row, the content block should fill only part of the row. This could be the entire row, only the left part, only the right part, or somewhere in the middle.
To draw this with html I was thinking of using two buffer divs (left and right side of the content). Note how wide the buffers are will be set programmatically (with angular) so does not need to be set on the CSS. This can just be hardcoded in the PLNKR with inline styles.
Here is my starting plnkr.
I asked a similar question here, but was only needing 3 variations for rows (left half, right half, full width), now I need more flexibility.
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating left</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me in the middle</p>
</div>
<div class="right-buffer"></div>
</div>
The output will be similar to below, but in addition to having the option of floating the element to the right or left, it could float in the middle.
Used floats to put it right / left and margin:auto to center the div using:
.left{
float: left;
width: 33.33%;
}
.right{
float: right;
width: 33.33%;
}
.center{
margin: auto;
width: 33.33%;
}
.right-buffer {
clear:both;
}
(Added some border / padding for illustration)
/* Styles go here */
.employee-container {
margin-bottom: 6px;
margin-top: 6px;
border: 1px solid lightsteelblue;
}
.employee-container > div.content {
padding: 15px;
background-color: lightsteelblue;
}
.left{
float: left;
width: 33.33%;
}
.right{
float: right;
width: 33.33%;
}
.center{
margin: auto;
width: 33.33%;
}
.right-buffer {
clear:both;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content left">
<p>Show me floating left</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content right">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content center">
<p>Show me in the middle</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I hope I understood well your request. I've made it in Plunker with flexbox.
http://plnkr.co/edit/IxCupfRaXUWYlkVhsqga
<style>
.flex{display:flex;}
.flex > *{flex:1;padding:2px}
</style>
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="flex">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating left with a very big text nd it will adjust automatically</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me in the middle small text</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is my Code and plunker link may be it can help you -
Link Plunker
HTML Code
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="employee-container leftDiv">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating left</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="employee-container rightDiv">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 centeredDiv">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me in the middle</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS Code
.employee-container {
margin-bottom: 6px;
margin-top: 6px;
}
.employee-container > div {
padding: 3px;
background-color: lightsteelblue;
}
.centeredDiv{
position:relative;
}
.centeredDiv > .employee-container{
position:absolute;
width:50%;
left:25%;
}
.rightDiv{
width:50%;
float:right;
}
.leftDiv{
width:50%;
float:left;
}
I've been put in a position where I need to use the display:table-cell command for div elements.
However I've discovered that the "cells" will only work correctly if a percentage is added to the width.
In this fiddle http://jsfiddle.net/NvTdw/ when I remove the percentage width the cells do not have equal widths, however when a percentage value is added to the width all is well, but only when that percentage is equal to the proportion of max no of divs, so for four columns 25%, five 20% and in this case five at 16.666%.
I thought maybe adding a percentage of less - say 1% would be a good fix all, but the cells fall out of line again.
Why is this?
.table {
display: table;
height: 200px;
width: 100%;
}
.cell {
display: table-cell;
height: 100%;
padding: 10px;
width: 16.666%;
}
.grey {
background-color: #666;
height: 100%;
text-align: center;
font-size: 48px;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
<div class="table">
<div class="cell">
<div class="grey">Block one</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block one</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
<div class="cell">
<div class="grey">Block four</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">x</div>
</div>
<div class="cell">
<div class="grey">xx</div>
</div>
<div class="cell">
<div class="grey">xxx</div>
</div>
<div class="cell">
<div class="grey">xxxx</div>
</div>
<div class="cell">
<div class="grey">xxxxxx</div>
</div>
<div class="cell">
<div class="grey">Block five test</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
</div>
You just need to add 'table-layout: fixed;'
.table {
display: table;
height: 100px;
width: 100%;
table-layout: fixed;
}
http://www.w3schools.com/cssref/pr_tab_table-layout.asp
Note also that vertical-align:top; is often necessary for correct table cell appearance.
css table-cell, contents have unnecessary top margin