equal height – Beacon Blog

CSS Equal Height Columns Without Javascript

By Zedric Myers| 2017-06-20T09:31:16+00:00 June 20th, 2017|Categories: Web Development|Tags: css equal height, eqaul height no js, equal height, equal height css, equal height css tables, equal height margin padding, no javascript|

Here are two CSS options for equal height columns, without using javascript.

1. Using CSS Table Properties

HTML

<div class="col-container">
  <div class="col">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>

  <div class="col">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

<h2>Column 1</h2>

<p>Hello World</p>

</div>

<h2>Column 2</h2>

<p>Hello World!</p>

</div>

<h2>Column 3</h2>

<p>Some other text..</p>

</div>

CSS

.col-container {
    display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
}

.col {
    display: table-cell; /* Make elements inside the container behave like table cells */
}

.col-container {

display: table; /* Make the container element behave like a table */

width: 100%; /* Set full-width to expand the whole page */

}

.col {

display: table-cell; /* Make elements inside the container behave like table cells */

}

Source: W3schools

2. Using Margin and Padding Method

HTML

<div class="main">
    <div class="container clearfix">
        <div class="content">
            <section>
                <h1>This is the Main Content</h1>
                <hr>
                <h2>A sub heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
            </section>
        </div>
        <div class="sidebar">
            <aside>
                <h2>This is a sidebar</h2>
                Sign up to the newsletter!
            </aside>
        </div>
    </div><!-- /.containter -->
</div><!-- /.main -->

<h1>This is the Main Content</h1>

<hr>

<h2>A sub heading</h2>

<p>Lorem ipsum dolor sit amet, consectetur...</p>

</section>

</div>

<aside>

<h2>This is a sidebar</h2>

</aside>

</div>

</div>

</div>

CSS

.main .container {
    padding-right: 330px;
    overflow: hidden;
}
.content {
    float: left;
    width: 100%;
    background-color: #fff;
}
.sidebar {
    float: right;
    margin-right: -330px;
    width: 300px;
    background-color: #fff;
}
.content,
.sidebar {
    padding-bottom: 99999px;
    margin-bottom: -99999px;
}
section,
aside {
    padding: 30px
}

.main .container {

padding-right: 330px;

overflow: hidden;

}

.content {

float: left;

width: 100%;

background-color: #fff;

}

.sidebar {

float: right;

margin-right: -330px;

width: 300px;

background-color: #fff;

}

.content,

.sidebar {

padding-bottom: 99999px;

margin-bottom: -99999px;

}

section,

aside {

padding: 30px

}

Source: Call Me Nick