How to create auto height column using div

Sometime, we need to create a table using div tags. It can be done easly by just creating a continer div(that will be a continer for all columns) and add required child divs(i.e that will be treated as a columns) and set the child div’s(i.e column) style float to left.

It works great if column’s height are fixed and there is no requirement for column’s content change, but when column’s content increase/decrease dynamically then it becomes very difficult to manage all column’s heights. I had spent a whole day to manage all column’s heights using jQuery/JavaScript.

But later, I comes to know that it can be done easly using only CSS 🙂 (i.e no need any script).
It can be done as:-
1) Create a container div and set its style “display:table;”
2) Create child divs for columns and set these style “display:table-cell;float:left;”


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Auto height columns using div/css without jQuery and JavaScript</title>
    <style type="text/css">
        .table
        {
            display: table;
            border: 1px solid red;
        }

        .col
        {
            display: table-cell;
            width: 200px;
            height: 300px;
            border: 1px solid red;
            vertical-align: top;
        }

        .col_1
        {
            background-color: antiquewhite;
        }

        .col_2
        {
            background-color: aqua;
        }

        .col_3
        {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="col col_1">
            <textarea rows="5" cols="20">This is first column.</textarea>
        </div>
        <div class="col col_2">
            <textarea rows="5" cols="20">This is second column. </textarea>
        </div>
        <div class="col col_3">
            <textarea rows="5" cols="20">This is third column. </textarea>
        </div>
    </div>
</body>
</html>

Programming is easy….

 

Advertisements