Make Floating Divs The Same Height

HTML/CSS: Making two floating divs the same height

You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

Make all floating DIVS same height

Set the wrapper to display: table and set the columns to display: table-cell (and remove the float)

So it will look like this:

.wrapper {
    display: table;
    ...
}
.wrapper .column {
    display: table-cell;
    ...
}

Make floating divs the same height

You could try instead of using float, use display: table-cell. You might find some older browsers don't understand this rule however. See below:

#wrapper {
    display: table; // See FelipeAls comment below
    width: 300px;
}

#left {
    display: table-cell;
    width: 50px;
    background: blue;
}

#right {
    display: table-cell;
    width: 250px;
    background: red;
}

float left and right make 2 column to be same height

When using percent for height, also the ascendants need a height, all the way to the html, unless one have a fixed height, i.e. viewport units vh, shown in sample 2

Sample 1, with height: 100% on the html, body

html,body {  height: 100%;}
.wrap {  height: 100%;  overflow: hidden;  width: 400px;}
.left {  float: left;  width: 50%;  background: #fafafa;  text-align: center;}
.right {  float: right;  background: white;  width: 50%;  text-align: center;  height: 100%;}

<div class="wrap">  <div class="left">    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>    <p>      left content is long    </p>
  </div>  <div class="right">right content is not</div></div>

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

How to make floating divs and equal height

If flexbox is an option, you can give:

display: flex;
flex-wrap: wrap;

to wrapper and that will fix the heights - see demo below:

@import url("reset.css");@import url('https://fonts.googleapis.com/css?family=Raleway'); * {  box-sizing: border-box;}body {  background-color: #9E9E9E;}#wrapper {  width: 95%;  max-width: 980px;  margin: 0 auto;  font-family: 'Raleway', sans-serif;  line-height: 2rem;  display: flex;  flex-wrap: wrap;}.header {  padding: 18px;  background-color: #757575;  border-radius: 5px;  width: 100%;  margin-top: 5px;  margin-bottom: 5px;}.column_left {  float: left;  padding: 18px;  width: 70%;  background-color: #607D8B;  border-top-left-radius: 5px;  border-bottom-left-radius: 5px;}.column_right {  float: right;  padding: 18px;  width: 29.99%;  background-color: #455A64;  border-top-right-radius: 5px;  border-bottom-right-radius: 5px;}/*For Screens 750 PX or less (width)*/
@media screen and (max-width: 750px) {  .header {    text-align: center;  }  .column_right {    display: none;  }  .column_left {    width: 100%;    border-radius: 5px;  }}h1 {  font-size: 1.8rem;}h2 {  font-size: 1.4rem;}p {} nav {} nav ul {} nav ul li {  width: 100%;  background-color: #607D8B;  text-align: center;  padding: 2.5px;  border-radius: 5px;  margin-bottom: 5px;}nav ul li a {  color: #455A64;}footer {  padding: 18px;  background-color: #757575;  border-radius: 5px;  width: 100%;  margin-top: 5px;  margin-bottom: 5px;  float: none;  display: flex;}

<div id="wrapper">  <h1 class="header">Lorem Ipsum</h1>  <div class="column_left">    <h2>Welcome to Lorem Ipsum</h2>    <p>Aenean nec vestibulum justo, ut aliquet ante.</p>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>    <p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p>    <p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p>    <p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p>  </div>  <div class="column_right">    <h2>Navigation</h2>     <nav>      <ul>        <li><a class="button" href="#">Link</a>        </li>        <li><a class="button" href="#">Link</a>        </li>        <li><a class="button" href="#">Link</a>        </li>      </ul>    </nav>  </div>  <footer>    © 2016 Ipsum Lorem  </footer></div>

Two floating divs side by side, same height

If you know that one of the two columns is always going to be taller than the other, then you can do something like this:

demo

Just give position: absolute to the shorter column and make it stretch from top: 0 to bottom: 0.

HTML:

<div class='container'>
    <div class="containerLeft">
        <h2>1.</h2>
        <p>First, let's play a video.</p>
    </div>
    <div class="containerRight">
        <img src="http://tctechcrunch2011.files.wordpress.com/2012/09/michael-headshot-red.jpg?w=288" />
    </div>
</div>

CSS:

.container { position: relative; }
.containerLeft { /* shorter column */
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 38%;
    padding: 2%;
    background-color: crimson;
}
.containerRight { /* taller column */
    margin: 0 0 0 42%;
    width: 58%;
    background: dodgerblue;
}

If you don't know for sure which one of them is going to be taller, then you can simulate the fact that they are of equal height by using a background gradient on their parent.

demo

HTML is the same, CSS becomes:

.container {
    overflow: hidden;
    background: -webkit-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: -moz-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: -o-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: linear-gradient(left, crimson 42%, dodgerblue 42%);
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
    width:38%;
    padding: 2%;
}
.containerRight { width: 58%; }

However, CSS gradients don't work in IE9 and older, so if you want a solution for IE8+, then you can try this

demo

which uses :before and :after pseudo-elements.

.container {
    overflow: hidden;
    position: relative;
}
.container:before,.container:after {
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0;
    content: '';
}
.container:before {
    left: 0;
    width: 42%;
    background: crimson;
}
.container:after {
    right: 0;
    width: 58%;
    background: dodgerblue;
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
    z-index: 2;
    width:38%;
    padding: 2%;
}
.containerRight { width: 58%; }

scale floating divs at same height

It's not possible with floats, but possible with table cells (demo):

.listpages {
    width: 28%;
    display: table-cell;
}

.excerpt {
    width: 70%;
    display: table-cell;
}

Make Floating Divs The Same Height

HTML/CSS: Making two floating divs the same height

Make all floating DIVS same height

Make floating divs the same height

float left and right make 2 column to be same height

How do I keep two side-by-side div elements the same height?

Flexbox

How to make floating divs and equal height

Two floating divs side by side, same height

demo

demo

demo

scale floating divs at same height

Related Topics

Leave a reply