Antony Suthakar J: 2015

Tuesday, 17 November 2015

How to make a div occupy the available height?

Here is the solution:

HTML

<div class="container-fluid">
<div class="row box">
</div>
</div>

CSS

html, body {
height: 100%;
margin: 0px;
}
.container-fluid {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
background: grey;
}

Friday, 13 November 2015

How would be the DIV elements can act as a TABLE element?

Do you believe your DIV elements can act as a TABLE element

Most of the people having doubt about how can a div element can act as a table element?. Finally the answer is revealed.

Create necessary DIV elements like the sample code below.
Read these simple steps to understand easily.

The DIV element with class 'custom-table' would render the table element's properties.
The DIV element with class 'row' would render the table-row properties.
The DIV element with class 'column' would render the table-cell properties.

HTML

<div class="cutom-table">
<div class="row">
<div class="column">
<span><strong>Title 1</strong></span>
</div>
<div class="column">
<span><strong>Title 2</strong></span>
</div>
<div class="column">
<span><strong>Title 3</strong></span>
</div>
</div>
<div class="row">
<div class="column">
<span>Content</span>
</div>
<div class="column">
<span>Content Content Content</span>
</div>
<div class="column">
<span>Content</span>
</div>
</div>
</div>

CSS

.cutom-table {
display: table;
width: 100%;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.row {
display: table-row;
width: 100%;
}
.column {
display: table-cell;
vertical-align: middle;
text-align: left;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}

Find the working sample in this link jsfiddle

That it. You have done!

Note:

You know the TABLE is an absolete.

Thursday, 12 November 2015

How to center text both horizontally and vertically without fixed height?

Below is the code sample for centering text content being centered both vertically and horizontally.

HTML

<body>
<div class="content">
<div class="inner-row-content">
<span class="inner-col-content">test content<br>
test content<br>
test content<br>
test content<br>
test content<br>
test content<br>
test content<br>
test content<br>
test content<br>
test content
</span>
</div>
</div>
</body>

CSS

html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
.content {
display: table;
width: 100%;
height: 100%;
}
.inner-row-content {
display: table-row;
width: 100%;
}
.inner-col-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}