jQuery: Setting the division height

The example below will loop through a set of div elements and set the height for them to the height of the tallest element.  In this case, 200px.

I have also used setTimeOut function so that you could see the before and after effects of implementing the div height changes.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>Set Division Height</title>      
        <style>
            #header {
                background-color:black;
                color:white;
                text-align:center;
                padding:5px;
            }
            #section {
                background-color:lightgrey;
                width:350px;
                height:200px;
                float:left;
                padding:10px;	 	 
            }
        </style>
        <script>
            setTimeout(function () {
                var $div = $('.division');
                var height = 0;
                $div.each(function () {
                    if ($(this).height() > height) {
                        height = $(this).height();
                    }
                });
                $div.height(height);
            },3000)
        </script>
    </head>
    <body>
        <div id="header" class="division">
            <h1>City Gallery</h1>
        </div>
        <div id="section" class="division">
            <h1>London</h1>
            <p>London is the capital city of England.</p>
            <p>Standing on the River Thames, London has been a major settlement for two millennia.</p>
        </div>
    </body>
</html>

button

HTML Table: Alignment and cell height

This entry is part 16 of 16 in the series HTML Table

Similar to Excel, we can align the text in the cell to the left, center or to the right.

The cell height could be set as well.
Output

Here in this example, we set the text to align vertically and in the center of the cell.

The height of the cell has been increased as well.

HTML Code
<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
    <style>
        table {
            width: 60%;
            border-style: solid;
            border-width: 1px;
            padding: 5px;
            border-spacing: 5px;
        }

        td {
            border-style: solid;
            border-width: 1px;
            text-align: center;
            vertical-align: top;
            height: 50px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Oasis</td>
        <td>Nevermind</td>
    </tr>
</table>

</body>
</html>

 

HTML Table: Setting table height

This entry is part 6 of 16 in the series HTML Table

Height could also be set for HTML table.  This is done in the table tag. The example below set the height of the table to have 100 pixels.

<table height='100px'>
Setting Table Height
<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='100%' height='100px'>
    <tr>
        <td>ID</td>
        <td>artiste</td>
        <td>album</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
</table>

</body>
</html>
Setting Table Height Output

CSS: Vertical space within a paragraph

This entry is part 26 of 26 in the series Basic CSS

The line height is the amount of space between each line.

We can express the line height in pixel or as a percentage.

If we use a percentage, the browser multiplies the line height percentage by the font size to derive a spacing amount.

    <style>
        #spacing {
            line-height: 200%;
        }

        #spacing_px {
            line-height: 30px;
        }
    </style>