Make Two Floated CSS Elements 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>

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>

Make Two Floated CSS Elements the Same Height

Why don't you use a table?

This is getting ridiculous. User wants to see a table. HTML language provides a table element to achieve exactly the goal user wants. Yet, we use a whole library (I an looking at JQuery answer) to achieve the goal w/o a table even though it means a script running on client!

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>

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;
}

How to make two div´s next to each other have the same height?

You just need to add a parent div to the divs that you want to have same height.

parent div:

overflow: hidden;

child div:

float: left; padding-bottom: 500em; margin-bottom: -500em;

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.

https://stackoverflow.com/a/1205485/2851845

   body{    margin: 0;}
.area-header{    height:40px;    background-color:#71A4C3;    margin-bottom: 20px;    margin-left:20px;    margin-right:20px;}
#area-wrapper{    overflow: hidden;    width: 100%;}  
.area-menu, .area-content{    float:left;    padding-bottom: 500em;    margin-bottom: -500em;}
.area-menu{    width: 200px;      background-color:#8BC6EA;}
.area-content{    width: 400px;      background-color: LightSlateGrey;  }

<body>    <div id="area-header" class="area-header">        <h2>A Web Application!</h2>    </div>    <div id="area-wrapper">        <div id="area-menu" class="area-menu">            <ul id="menu">                <li id="menu-item"><a href="#" onclick="return false">@item.Title</a></li>            </ul>        </div>        <div id="area-content" class="area-content">            <div style="height:200px;background:red;"></div>        </div>    </div></body>

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%; }

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;
    ...
}

Force two li elements to have same height

The easiest way I believe is using flexbox.

ul {
  display: flex;
}

* {  box-sizing: border-box;}
ul {  padding: 0;  border: 1px solid red;  display: flex;}
li {  list-style-type: none;  margin: 0;  padding: 1em;  width: 35%;  margin-right: 50px;  border: 1px solid #888;}

<ul>  <li>    <h2>caption 1</h2>    <p>.</p>    <p>.</p>    <p>.</p>    <p>.</p>    <p>.</p>    <p>.</p>  </li>  <li>    <h2>caption 2</h2>    <p>...</p>  </li></ul>

Make Two Floated CSS Elements The Same Height

HTML/CSS: Making two floating divs the same height

float left and right make 2 column to be same height

Make Two Floated CSS Elements the Same Height

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

Flexbox

Make floating divs the same height

How to make two div´s next to each other have the same height?

Two floating divs side by side, same height

demo

demo

demo

Make all floating DIVS same height

Force two li elements to have same height

Related Topics

Leave a reply