I've made a table from divs, and I want that every second row is different colored. But every columns are different colored. What is the problem?
.mTable {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
}
.mTableRow {
display: table-row;
width: auto;
clear: both;
}
.mTableHeading {
display: table-header-group;
background-color: #ddd;
height: auto;
color: black;
text-align: center;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.mTableCell,
.mTableHead {
display: table-cell;
padding: 5px;
border: 1px solid #999999;
text-align: center;
color: black;
border-bottom: 1px solid #000000;
width: 200px;
background-color: #ccc;
}
.mTableRow>div:nth-child(even) {
background: blue;
}
<div class="mTable">
<div class="mTableRow">
<div class="mTableHead">ID</div>
<div class="mTableHead">Név</div>
<div class="mTableHead">Komment</div>
<div class="mTableHead">Tól</div>
<div class="mTableHead">Ig</div>
</div>
<div class="mTableRow">
<div class="mTableCell">9</div>
<div class="mTableCell">Robi1 </div>
<div class="mTableCell"> </div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">31</div>
<div class="mTableCell">FŰTÉS </div>
<div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">36</div>
<div class="mTableCell">Növényház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">93</div>
<div class="mTableCell">Üvegház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">94</div>
<div class="mTableCell">Cserepes fűtés-hűtés</div>
<div class="mTableCell">2017 február 9.-i állapott</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">95</div>
<div class="mTableCell">Cserepes 2017</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">96</div>
<div class="mTableCell">3 fő helyiség</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
</div>
</div>
</div>
</div>
Just your css was wrong replace with this:
.mTableRow:nth-child(even) div {
background: blue;
}
.mTable {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
}
.mTableRow {
display: table-row;
width: auto;
clear: both;
}
.mTableHeading {
display: table-header-group;
background-color: #ddd;
height: auto;
color : black;
text-align: center;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.mTableCell, .mTableHead {
display: table-cell;
padding: 5px;
border: 1px solid #999999;
text-align: center;
color : black;
border-bottom: 1px solid #000000;
width: 200px;
background-color: #ccc;
}
.mTableRow:nth-child(even) div {
background: blue;
}
<div class="mTable">
<div class="mTableRow">
<div class="mTableHead">ID</div>
<div class="mTableHead">Név</div>
<div class="mTableHead">Komment</div>
<div class="mTableHead">Tól</div>
<div class="mTableHead">Ig</div>
</div>
<div class="mTableRow">
<div class="mTableCell">9</div>
<div class="mTableCell">Robi1 </div>
<div class="mTableCell"> </div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">31</div>
<div class="mTableCell">FŰTÉS </div>
<div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">36</div>
<div class="mTableCell">Növényház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">93</div>
<div class="mTableCell">Üvegház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">94</div>
<div class="mTableCell">Cserepes fűtés-hűtés</div>
<div class="mTableCell">2017 február 9.-i állapott</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">95</div>
<div class="mTableCell">Cserepes 2017</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">96</div>
<div class="mTableCell">3 fő helyiség</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
</div>
</div>
</div>
</div>
You need
.mTableRow:nth-child(odd) {
background: #ccc;
}
.mTableRow:nth-child(even) {
background: blue;
}
as
.mTableRow>div:nth-child(even) {
background: blue;
}
selected the even numbered children of each .mTableRow rather than the row itself.
.mTable {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
}
.mTableRow {
display: table-row;
width: auto;
clear: both;
}
.mTableHeading {
display: table-header-group;
background-color: #ddd;
height: auto;
color: black;
text-align: center;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.mTableCell,
.mTableHead {
display: table-cell;
padding: 5px;
border: 1px solid #999999;
text-align: center;
color: black;
border-bottom: 1px solid #000000;
width: 200px;
}
.mTableRow:nth-child(odd) {
background: #ccc;
}
.mTableRow:nth-child(even) {
background: blue;
}
<div class="mTable">
<div class="mTableRow">
<div class="mTableHead">ID</div>
<div class="mTableHead">Név</div>
<div class="mTableHead">Komment</div>
<div class="mTableHead">Tól</div>
<div class="mTableHead">Ig</div>
</div>
<div class="mTableRow">
<div class="mTableCell">9</div>
<div class="mTableCell">Robi1 </div>
<div class="mTableCell"> </div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">31</div>
<div class="mTableCell">FŰTÉS </div>
<div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">36</div>
<div class="mTableCell">Növényház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">93</div>
<div class="mTableCell">Üvegház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">94</div>
<div class="mTableCell">Cserepes fűtés-hűtés</div>
<div class="mTableCell">2017 február 9.-i állapott</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">95</div>
<div class="mTableCell">Cserepes 2017</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">96</div>
<div class="mTableCell">3 fő helyiség</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
</div>
</div>
</div>
</div>
Your columns are different because of this:
.mTableRow>div:nth-child(even) {
background: blue;
}
This is colouring every column at even index to blue.
And on of your heading is missing.
.mTable {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
}
.mTableRow {
display: table-row;
width: auto;
clear: both;
}
.mTableHeading {
display: table-header-group;
background-color: #ddd;
height: auto;
color: black;
text-align: center;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.mTableCell,
.mTableHead {
display: table-cell;
padding: 5px;
border: 1px solid #999999;
text-align: center;
color: black;
border-bottom: 1px solid #000000;
width: 200px;
background-color: #ccc;
}
.mTableRow>div:nth-child(even) {
background: blue;
}
<div class="mTable">
<div class="mTableRow">
<div class="mTableHead">ID</div>
<div class="mTableHead">Név</div>
<div class="mTableHead">Komment</div>
<div class="mTableHead">Tól</div>
<div class="mTableHead">Ig</div>
<div class="mTableHead">Missing</div>
</div>
<div class="mTableRow">
<div class="mTableCell">9</div>
<div class="mTableCell">Robi1 </div>
<div class="mTableCell"> </div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">31</div>
<div class="mTableCell">FŰTÉS </div>
<div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">36</div>
<div class="mTableCell">Növényház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">93</div>
<div class="mTableCell">Üvegház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">94</div>
<div class="mTableCell">Cserepes fűtés-hűtés</div>
<div class="mTableCell">2017 február 9.-i állapott</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">95</div>
<div class="mTableCell">Cserepes 2017</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">96</div>
<div class="mTableCell">3 fő helyiség</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
</div>
</div>
</div>
</div>
Try this.
<style type="text/css">
.TFtableCol{
width:100%;
border-collapse:collapse;
}
.TFtableCol td{
padding:7px; border:#4e95f4 1px solid;
}
/* improve visual readability for IE8 and below */
.TFtableCol tr{
background: #b8d1f3;
}
/* Define the background color for all the ODD table columns */
.TFtableCol tr td:nth-child(odd){
background: #b8d1f3;
}
/* Define the background color for all the EVEN table columns */
.TFtableCol tr td:nth-child(even){
background: #dae5f4;
}
</style>
<table class="TFtableCol">
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
</table>
Related
I have the following snippet (open snippet as full page) :
#container_1{
margin-top: 50px;
margin-bottom: 150px;
}
.block1{
background: green;
margin-bottom: 15px;
color: #FFFFFF;
}
#moving_block{
z-index: 0;
background-color: purple;
color: #FFFFFF;
}
#footer{
background-color: gray;
height: 5000px;
color: #FFFFFF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="container_1" class="container">
<div class="col-md-5 col-md-offset-1">
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
</div>
<div class="col-md-4">
<div id="moving_block" class="col-md-3 affix">
<div class="row">
<p>TEXT</p>
</div>
</div>
</div>
</div>
<section id="footer">
MY FOOTER
</section>
I would like to stop the purple block when he encounter the last green block.
This can be done using position:sticky.
I consider bootstrap V4 for this since there is builtin function for sticky. I also simplified the code to keep only the relevant one for the demo:
#container_1 {
margin-top: 50px;
margin-bottom: 150px;
}
.block1 {
background: green;
color: #FFFFFF;
}
.block1:not(:last-child) {
margin-bottom: 15px;
}
#moving_block {
background-color: purple;
color: #FFFFFF;
}
#footer {
background-color: gray;
height: 5000px;
color: #FFFFFF;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<div id="container_1" class="container">
<div class="row">
<div class="col-5 col-offset-1">
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
</div>
<div class="col-6">
<div id="moving_block" class="overflow-auto position-sticky sticky-top">
<p>TEXT</p>
</div>
</div>
</div>
</div>
<section id="footer">
MY FOOTER
</section>
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
I want to create grid or table with three cards. Two cards in a row and the third under these two cards, like on the image (the third card can be other size). But how can I do this?
<div class="cards">
<div id="card1">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card2">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card3">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
This should work
.first-row{
display:flex;
}
.first-row .card{
flex:1;
}
.card{
border:5px solid black;
margin: 10px;
}
<div class="cards">
<div class='first-row'>
<div class='card' id="card1">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div class='card' id="card2">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
<div class='card' id="card3">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
Check it out.
.first-row{
display:flex;
}
.first-row .card{
flex:1;
}
.card{
border:5px solid black;
margin: 10px;
}
<div class="cards">
<div class='first-row'>
<div class='card' id="card1">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div class='card' id="card2">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
<div class='card' id="card3">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
The Answer is CSS Flex Box ;)
section {
max-width: 740px;
margin: 0 auto;
display: flex;
}
.column {
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
section:nth-of-type(5) .column:first-of-type {
flex-grow: 2;
flex-shrink: 2;
flex-basis: 22px;
}
section:nth-of-type(6) .column:nth-of-type(2) {
flex-grow: 4;
flex-shrink: 4;
flex-basis: 66px;
}
/* OTHER STYLES */
html, body {
color: white;
height: 100%;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
padding: 10px;
background: linear-gradient(135deg, #b04, #f80) fixed;
}
.column {
padding: 10px 0;
background-color: rgba(255, 0, 0, 0.25);
text-align: center;
border: 1px solid transparentize(white, 0.25);
background-color: transparentize(white, 0.8);
color: transparentize(white, 0.1);
}
<section>
<div class="column">One Third</div>
<div class="column">One Third</div>
<div class="column">One Third</div>
</section>
<section>
<div class="column">One Half</div>
<div class="column">One Half</div>
</section>
<section>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
</section>
<section>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
</section>
<section>
<div class="column">One Half</div>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
</section>
<section>
<div class="column">One Sixth</div>
<div class="column">Two Thirds</div>
<div class="column">One Sixth</div>
</section>
.cards {
display: grid;
/* Make two tracks with the remaining space*/
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
#card1,
#card2 {
background: #a03;
}
#card3 {
background: #be3;
/*Let card3 span 2 tracks*/
grid-column: span 2;
}
/*This will make the images span 100%*/
img {
max-width: 100%;
height: auto;
}
<div class="cards">
<div id="card1">
<img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card2">
<img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card3">
<img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</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 had issue with unwanted white space and now have figured that out, but now I am having issues with browser resizing. How do I keep the two scrolling divs adjust with height and width. I want the div on the left to automatically adjust in height while the div on the right automatically adjusts in height and width whatever the size of the browser is. Thank you for your help.
I am trying to make it easier and display it in JSfiddle but it doesn't seem to display correctly.
Here is the code:
<html>
<body>
<div class="mainContain">
<div class = "main">
sdfsdf
</div>
<div id="container">
<div class="topmenu">
<div class="leftmenu">
button
</div>
<div class="rightmenu">
button
</div>
</div>
<div class="filter">
</div>
<div class="left">
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
<div class="containerRight">
A
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
</body>
</html>
<style>
html, body{
min-height:100%;
margin:0;
padding:0;
}
#container {
float:left;
margin: 0;
padding: 0;
height: 90%;
width: 300px;
border:solid #000 1px;
display: inline-block;
}
.left {
padding:0;
overflow-y: scroll;
overflow-x:hidden;
height:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.containerRight {
float:left;
margin: 0;
padding: 0;
height: 90%;
width:76%;
display: inline;
border:solid #000 1px;
overflow: scroll;
overflow-x:hidden;
}
.main {
height:50px;
width: 100%;
border: solid 1px black;
}
.right {
padding:0;
overflow: scroll;
overflow-x:hidden;
height:100%;
width:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.post {
width: 290px;
height: 100px;
display: inline-block;
}
.topmenu {
height: 26px;
width:300px;
border: solid 1px #000000;
}
.leftmenu {
float:left;
width: 147px;
height: 25px;
border: solid 1px black;
}
.rightmenu {
float:right;
width: 147px;
height: 25px;
border: solid 1px black;
}
.filter {
margin-top 250px;
width:300px;
height:30px;
border: solid 1px black;
}
.mainContain {
height:100%;
width:100%;
}
</style>
i had modified your code
the two files are index.html and style.css
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="mainContain">
<div class = "main">
sdfsdf
</div>
<div id="container">
<div class="topmenu">
<div class="leftmenu">
button1
</div>
<div class="rightmenu">
button2
</div>
</div>
<div class="left">
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
<div class="containerRight">
A
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
</body>
</html>
style.css
html, body{
min-height:100%;
margin:0;
padding:0;
}
#container {
float:left;
margin: 0;
padding: 0;
height: 90%;
width: 300px;
border:solid #000 1px;
display: inline-block;
}
.left {
padding:0;
overflow-y: scroll;
overflow-x:hidden;
height:90%;
/*-webkit-overflow-scrolling: touch;*/
}
.containerRight {
float:left;
margin: 0;
padding: 0;
height: 90%;
width:76%;
display: inline;
border:solid #000 1px;
overflow: scroll;
overflow-x:hidden;
}
.main {
height:50px;
width: 100%;
border: solid 1px black;
}
.right {
padding:0;
overflow: scroll;
overflow-x:hidden;
height:100%;
width:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.post {
width: 290px;
height: 100px;
display: inline-block;
}
.topmenu {
height: 10%;
width:300px;
border: solid 1px #000000;
}
.leftmenu {
float:left;
width: 147px;
height: 25px;
border: solid 1px black;
}
.rightmenu {
float:right;
width: 147px;
height: 25px;
border: solid 1px black;
}
.filter {
margin-top 250px;
width:300px;
height:30px;
border: solid 1px black;
}
.mainContain {
height:100%;
width:100%;
}
i think it is your answer if you want to ask anything else then you know what to do ,
and if this is your answer then mark it as answered, so that it no longer reamain in the catagory of unanswered.
i had seen your code , i'd ran it on my browser as it displays under my Mozilla , the fault is not in styling the fault is the placement of your button your button are in the 'id=container' tag which take space from 'id=left' tag hence it is came out due to its data, if you remove :
<div class="topmenu">
<div class="leftmenu">
button
</div>
<div class="rightmenu">
button
</div>
</div>
<div class="filter">
</div>
this section from your code you will see the difference.