How to align both vertically and horizontally in CSS? - html

Question

I have a box like this:
<section class="notes-list-box">
<div class="nn">
<div class="heading">Notes</div>
<div class="boxdescription">With our complete study notes, your homework is much easier.</div>
</div>
<div class="ttn">
<div class="heading">Things To Know</div>
<div class="boxdescription">Things to know provides additional information on every topic which enhance the knowledge of the students.</div>
</div>
<div class="vdos">
<div class="heading">Videos</div>
<div class="boxdescription">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div>
</div>
<div class="sqaa">
<div class="heading">Solved Question and Answer</div>
<div class="boxdescription">With 100's of solved questions solved, now you can easily prepare your exam for free.</div>
</div>
</section>
Adding little bit of styling make it looks like this:
I have tried using vertical-align like this:
.notes-list-box > div {
vertical-align: top;
}
and it works. But I don't know how to align vertical at bottom so that all the white space also comes to bottom.
So the white space below notes and solved question and answer white background comes till bottom.
I want to fill those gaps with white space:

Answer 1

Use flexbox.
I used this CSS:
.notes-list-box {
display: flex;
font-family: sans-serif;
}
.notes-list-box > div {
margin: 0 5px;
background-color: white;
}
.heading {
color: white;
font-weight: bold;
padding: 10px 2px;
text-align: center;
}
.boxdescription {
padding: 5px;
}
.nn .heading {
background-color: #61B5DF;
}
.ttn .heading {
background-color: #41AF43;
}
.vdos .heading {
background-color: #FF8A00;
}
.sqaa .heading {
background-color: #FF1F2D;
}
See the result on JSfiddle.

Answer 2

The easiest way to do what you are trying to do is by using the display: table CSS properties.
JS Fiddle Here
HTML
<div class="table">
<div class="table-row">
<div class="heading table-cell">Notes</div>
<div class="heading table-cell">Things To Know</div>
<div class="heading table-cell">Videos</div>
<div class="heading table-cell">Solved Question and Answer</div>
</div>
<div class="table-row">
<div class="table-cell">With our complete study notes, your homework is much easier.</div>
<div class="table-cell">Things to know provides additional information on every topic which enhance the knowledge of the students.</div>
<div class="table-cell">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div>
<div class="table-cell">With 100's of solved questions solved, now you can easily prepare your exam for free.</div>
</div>
</div>
CSS
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid;
}
.heading {
vertical-align: middle;
text-align: center;
}
Here is an update with styling similar to yours.

Answer 3

Another alternative using jquery. Here is the fiddle.
JQUERY
$('.parentheight').each(function(){
var maxdivheight = 0;
$('.childheight',this).each(function(){
var divheight = $(this).height();
// compare height
if ( divheight > maxdivheight ) {
maxdivheight = divheight;
} else { }
});
// set all divs to max height
$('.childheight',this).height(maxdivheight);
});
HTML
<section class="notes-list-box parentheight">
<div class="alignbox nn childheight">
<div class="heading">Notes</div>
<div class="boxdescription">With our complete study notes, your homework is much easier.</div>
</div>
<div class="alignbox ttn childheight">
<div class="heading">Things To Know</div>
<div class="boxdescription">Things to know provides additional information on every topic which enhance the knowledge of the students.</div>
</div>
<div class="alignbox vdos childheight">
<div class="heading">Videos</div>
<div class="boxdescription">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div>
</div>
<div class="alignbox sqaa childheight">
<div class="heading">Solved Question and Answer</div>
<div class="boxdescription">With 100's of solved questions solved, now you can easily prepare your exam for free.</div>
</div>
</section>
CSS
.alignbox {
float: left;
width: 24%;
border: 1px solid red;
}

Answer 4

I got it working by setting everything to 100% height like so: http://jsfiddle.net/sur38w6e/
Your html was untouched.
.notes-list-box>div{
float:left;
width:120px;
background-color:yellow;
margin: 5px;
height:100%;
overflow:auto;
}
.heading{
background-color:red;
}
.notes-list-box{
background-color:green;
overflow:auto;
height:100%;
}
body,html{
height:100%;
}