Check out this cool pen: http://codepen.io/helloworld/pen/BcjCJ?editors=110
I'm facing an issue where I'm unable to create both left and right margins around my datagrid. Only the left margin seems to be possible.
Any suggestions on how I can fix this?
I want to have a 10px margin on each side, for example.
HTML:
<div id="gridWrapper" class="test">
<div id="gridHeader">
<div class="columnHeader">Monday</div>
<div class="columnHeader">Tuesday</div>
</div>
<div id="gridContent">
<!-- Monday Column-->
<div style="background:lightblue;" class="column">
<div class="custom-row">3333333 1111111111112222222... (content has been truncated for brevity)
<div class="custom-row">22222222222... (content has been truncated for brevity)
</div>
<!-- Tuesday Column-->
<div style="background:green;" class="column">
<div class="custom-row">fsadffsfsfsd fsdsfdfsdfsadffsadffsf... (content has been truncated for brevity)
<div class="custom-row">fsadffsfsfsd fsdsfdfsdfsadffsadffsf... (content has been truncated for brevity)
</div>
</div>
</div>
CSS:
body,html{
padding:0;
margin:0;
}
.test {
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
...
.custom-row{
height:200px;
overflow-y:auto;
overflow-x:hidden;
border:1px solid blue;
background:orange;
}