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

377

I have two divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. I can't figure this one out though. Ideas?

To clarify my confusing question, I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.

<div style="overflow: hidden">

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!

    </div>

</div>

edited May 19 '18 at 18:01

ndmeiri

4,178122837

asked Jun 8 '10 at 13:39

NibblyPig

24.4k58150277

How did you put them "side by side"? Using float?

– MvanGeest
Jun 8 '10 at 13:41

Do you want that if one of them is getting bigger, than the other one will stay the same height size?

– Wai Wong
Jun 8 '10 at 13:45

A example that is not a solution but is in an editable environment can be found here: jsfiddle.net/PCJUQ

– MvanGeest
Jun 8 '10 at 13:55

add a comment |

377

I have two divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. I can't figure this one out though. Ideas?

To clarify my confusing question, I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.

<div style="overflow: hidden">

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!

    </div>

</div>

edited May 19 '18 at 18:01

ndmeiri

4,178122837

asked Jun 8 '10 at 13:39

NibblyPig

24.4k58150277

How did you put them "side by side"? Using float?

– MvanGeest
Jun 8 '10 at 13:41

Do you want that if one of them is getting bigger, than the other one will stay the same height size?

– Wai Wong
Jun 8 '10 at 13:45

A example that is not a solution but is in an editable environment can be found here: jsfiddle.net/PCJUQ

– MvanGeest
Jun 8 '10 at 13:55

add a comment |

377

121

I have two divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. I can't figure this one out though. Ideas?

To clarify my confusing question, I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.

<div style="overflow: hidden">

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!

    </div>

</div>

edited May 19 '18 at 18:01

ndmeiri

4,178122837

asked Jun 8 '10 at 13:39

NibblyPig

24.4k58150277

I have two divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. I can't figure this one out though. Ideas?

To clarify my confusing question, I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.

<div style="overflow: hidden">

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!

    </div>

</div>

<div style="overflow: hidden">

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!

    </div>

</div>

<div style="overflow: hidden">

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>

    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

        Some content!

    </div>

</div>

html css css3 html-table flexbox

edited May 19 '18 at 18:01

ndmeiri

4,178122837

asked Jun 8 '10 at 13:39

NibblyPig

24.4k58150277

edited May 19 '18 at 18:01

ndmeiri

4,178122837

asked Jun 8 '10 at 13:39

NibblyPig

24.4k58150277

edited May 19 '18 at 18:01

ndmeiri

4,178122837

edited May 19 '18 at 18:01

ndmeiri

4,178122837

edited May 19 '18 at 18:01

ndmeiri

4,178122837

asked Jun 8 '10 at 13:39

NibblyPig

24.4k58150277

asked Jun 8 '10 at 13:39

NibblyPig

24.4k58150277

asked Jun 8 '10 at 13:39

NibblyPig

24.4k58150277

How did you put them "side by side"? Using float?

– MvanGeest
Jun 8 '10 at 13:41

Do you want that if one of them is getting bigger, than the other one will stay the same height size?

– Wai Wong
Jun 8 '10 at 13:45

A example that is not a solution but is in an editable environment can be found here: jsfiddle.net/PCJUQ

– MvanGeest
Jun 8 '10 at 13:55

add a comment |

How did you put them "side by side"? Using float?

– MvanGeest
Jun 8 '10 at 13:41

Do you want that if one of them is getting bigger, than the other one will stay the same height size?

– Wai Wong
Jun 8 '10 at 13:45

A example that is not a solution but is in an editable environment can be found here: jsfiddle.net/PCJUQ

– MvanGeest
Jun 8 '10 at 13:55

How did you put them "side by side"? Using float?

– MvanGeest
Jun 8 '10 at 13:41

Do you want that if one of them is getting bigger, than the other one will stay the same height size?

– Wai Wong
Jun 8 '10 at 13:45

A example that is not a solution but is in an editable environment can be found here: jsfiddle.net/PCJUQ

– MvanGeest
Jun 8 '10 at 13:55

add a comment |

20 Answers
20

active

oldest

votes

493

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>

Prefixes may be required for older browsers, see browser support.

edited Oct 19 '16 at 12:09

answered Dec 18 '13 at 22:13

Pavlo

24.3k96696

13

flexbox worked like a charm. If you are developing a responsive design and you want your second div to go down in smaller screens you will need to set .row to display: block; in your media query.

– Nick Zulu
Dec 30 '13 at 2:10

4

@NickZulu I believe in this case you should set flex-direction: column: jsfiddle.net/sdsgW/1

– Pavlo
Dec 30 '13 at 9:42

1

@Eckstein it is not required for both solutions. See demos.

– Pavlo
Oct 7 '14 at 5:51

2

this wasn't working for me until I added height:100%; to the children columns

– Jacob Raccuia
Jun 21 '16 at 4:10

1

Is it possible to make one specific child div determine the height of the other? So that if the content of other child div is changing, it can't change the height of that specific div

– Narek
Apr 15 '17 at 7:03

|
show 10 more comments

140

This is a common problem which many have encountered, but luckily some smart minds like Ed Eliot's on his blog have posted their solutions online.

Basically what you do is make both divs/columns very tall by adding a padding-bottom: 100% and then "trick the browser" into thinking they aren't that tall using margin-bottom: -100%. It is better explained by Ed Eliot on his blog, which also includes many examples.

.container {

    overflow: hidden;

}

.column {

    float: left;

    margin: 20px;

    background-color: grey;

    padding-bottom: 100%;

    margin-bottom: -100%;

}

<div class="container">



    <div class="column">

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

    </div>



    <div class="column">

        Something

    </div>



</div>

edited Aug 14 '18 at 13:44

community wiki

8 revs, 5 users 59%
lambda

1

Explanation on One True Layout was a bit poor, but after checking the first link I implemented it fine from one of the examples he used. However it's really bad because you have to use an image to represent the bottom border of the columns, and it's dubious for cross-browser support. However it does work and it doesn't rely on javascript, so I'm going to mark it as correct. Thanks!

– NibblyPig
Jun 8 '10 at 14:15

This doesn't seem to work in old IE browsers (yes, unfortunately I still have to support IE6). Any way to make this compatible?

– strongriley
Mar 20 '12 at 14:39

1

@strongriley Checkout Ed Eliot's blog: ejeliot.com/blog/61 It should work in IE6. Maybe the problem is caused elsewhere?

– mqchen
Mar 22 '12 at 8:47

1

This breaks if the window is too narrow and the divs are placed beneath each other.

– WhyNotHugo
Aug 17 '13 at 5:13

1

How do you define the cell padding you actually want present in the table cell, eg padding: 7px 10px, if the padding-bottom property is set to 100%? (PS overflow:hidden was also required for me on the row)

– user1063287
Mar 19 '18 at 4:23

|
show 2 more comments

This is an area where CSS has never really had any solutions — you’re down to using <table> tags (or faking them using the CSS display:table* values), as that’s the only place where a “keep a bunch of elements the same height” was implemented.

<div style="display: table-row;">



    <div style="border:1px solid #cccccc; display: table-cell;">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>



    <div style="border:1px solid #cccccc;  display: table-cell;">

        Some content!

    </div>



</div>

This works in all versions of Firefox, Chrome and Safari, Opera from at least version 8, and in IE from version 8.

edited Aug 23 '13 at 15:01

community wiki

4 revs, 2 users 90%
Paul D. Waite

5

This solution is not available to those who need to support IE6/IE7, but I believe it's the cleanest.

– twsaef
Jun 21 '12 at 6:40

1

this answer is PERFECT! just a small reminder: it might happen that some client requires "table" instead of "table-row"

– tiborka
Feb 19 '13 at 0:51

@user2025810: aw, thank you. Do you know which clients require table instead of table-row?

– Paul D. Waite
Feb 19 '13 at 1:17

@user2025810: yikes, can't say I've ever tested in that :) Good to know though, cheers. (Given its PDF focus I bet it supports some of the print-related features of CSS 2.1 that aren't implemented very well in browsers.)

– Paul D. Waite
Feb 19 '13 at 17:02

7

With this solution - forget about using percentage width for your divs, unless you add display: table on the parent element, which will mess things up.

– Alex G
Aug 27 '13 at 13:57

|
show 1 more comment

Using Javascript

using jQuery you can do it in a super simple one-line-script.

// HTML

<div id="columnOne">

</div>



<div id="columnTwo">

</div>



// Javascript

$("#columnTwo").height($("#columnOne").height());

Using CSS

This is a bit more interesting. The technique is called Faux Columns. More or less you don't actually set the actual height to be the same, but you rig up some graphical elements so they look the same height.

edited Aug 30 '16 at 12:56

lambda

2,40012028

answered Jun 8 '10 at 14:14

Derek Adair

11.2k2785129

I think using JavaScript is a very good method. The problem is - it falls apart if disabled. I think I will use this anyway and build the best contingency I can ;--) Thanks!

– nicorellius
Jul 2 '12 at 4:50

9

This implies that columnOne'S height is always bigger than columnTwo.

– Sébastien Richer
Apr 12 '14 at 14:32

1

You should compare height of columns before applying the height for them. I think js is the best method for this problem, almost all browsers are js enabled, if not, they should get out of your website and many other websites.

– SalmanShariati
Dec 25 '14 at 12:44

6

This will also only work when the page is first loaded. If the window is then resized, causing the divs to resize then they will not stay in sync

– ikariw
Apr 29 '15 at 14:05

add a comment |

I'm surprised that nobody has mentioned the (very old but reliable) Absolute Columns technique:
http://24ways.org/2008/absolute-columns/

In my opinion, it is far superior to both Faux Columns and One True Layout's technique.

The general idea is that an element with position: absolute; will position against the nearest parent element that has position: relative;. You then stretch a column to fill 100% height by assigning both a top: 0px; and bottom: 0px; (or whatever pixels/percentages you actually need.) Here's an example:

<!DOCTYPE html>

<html>

  <head>

    <style>

      #container

      {

        position: relative;

      }



      #left-column

      {

        width: 50%;

        background-color: pink;

      }



      #right-column

      {

        position: absolute;

        top: 0px;

        right: 0px;

        bottom: 0px;

        width: 50%;

        background-color: teal;

      }

    </style>

  </head>

  <body>

    <div id="container">

      <div id="left-column">

        <ul>

          <li>Foo</li>

          <li>Bar</li>

          <li>Baz</li>

        </ul>

      </div>

      <div id="right-column">

        Lorem ipsum

      </div>

    </div>

  </body>

</html>

answered Feb 6 '13 at 2:21

geofflee

1,87521722

1

If the right column has more lines than the left, content is overflow.

– David
Feb 12 '14 at 9:06

@David. You can switch the left and the right.

– Mad Physicist
Jan 7 '15 at 6:20

add a comment |

You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow.

Here a sample of implementation

Usage: $(object).equalHeights([minHeight], [maxHeight]);



Example 1: $(".cols").equalHeights(); 

           Sets all columns to the same height.



Example 2: $(".cols").equalHeights(400); 

           Sets all cols to at least 400px tall.



Example 3: $(".cols").equalHeights(100,300); 

           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Here is the link

http://www.cssnewbie.com/equalheights-jquery-plugin/

answered Jun 8 '10 at 14:03

Starx

58.9k35157239

add a comment |

You could use Faux Columns.

Basically it uses a background image in a containing DIV to simulate the two equal-height-DIVs. Using this technique also allowes you to add shadows, rounded corners, custom borders or other funky patterns to your containers.

Only works with fixed-width boxes though.

Well tested out and properly working in every browser.

edited Jan 7 '15 at 12:14

answered Jun 8 '10 at 16:24

Arve Systad

4,65012655

add a comment |

Just spotted this thread while searching for this very answer. I just made a small jQuery function, hope this helps, works like a charm:

JAVASCRIPT

var maxHeight = 0;

$('.inner').each(function() {

    maxHeight = Math.max(maxHeight, $(this).height());

});

$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">

    <div class="inner">

        Content in here

    </div>

</div>

<div class="rhs_content">

    <div class="inner">

        More content in here

    </div>

</div>

answered Dec 5 '13 at 15:34

Mike Wells

24943

1

I used outerHeight to include padding and borders. This is the cleanest solution I think.

– Sébastien Richer
Apr 12 '14 at 14:35

Perfect solution I was looking for. Other solutions are good for case that a row has a few columns but this approach is better for complex html content. Small adding: When document resize in responsive page, content height doesn't change because of fixed. So, I added $('.inner').css({ height: "initial" }); before 'each function' to set height to default.

– bafsar
Mar 5 '17 at 7:10

add a comment |

This question was asked 6 years ago, but it's still worthy to give a simple answer with flexbox layout nowadays.

Just add the following CSS to the father <div>, it will work.

display: -webkit-flex;

display: flex;

flex-direction: row;

align-items: stretch;

The first two lines declare it will be displayed as flexbox. And flex-direction: row tells browsers that its children will be display in columns. And align-items: stretch will meet the requirement that all the children elements will stretch to the same height it one of them become higher.

answered Nov 17 '16 at 8:34

Hegwin

115111

1

The accepted answer uses flexbox already.

– TylerH
Nov 18 '16 at 19:38

1

@TylerH But asked has edited his question and added I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height. which is not mentioned in the accepted answer...I just made a completion here. Maybe I should have commented it on the accepted answer?

– Hegwin
Nov 22 '16 at 2:30

1

it's not mentioned explicitly because it's covered already by the simple CSS declaration already. Open up the answer's Snippet in fullscreen and resize your browser window to see; they stay the same size as each other.

– TylerH
Nov 26 '16 at 4:34

1

Even if the accepted answer uses flexbox, this one has a different approach. align-items: stretch is what set me on the path to solving my problem in a very particular situation.

– BenoitLussier
Jun 13 '18 at 0:20

Isn't align-items: stretch; flex's default?

– madav
Sep 17 '18 at 4:57

add a comment |

If you don't mind one of the divs being a master and dictating the height for both divs there is this:

Fiddle

No matter what, the div on the right will expand or squish&overflow to match the height of the div on the left.

Both divs must be immediate children of a container, and have to specify their widths within it.

Relevant CSS:

.container {

    background-color: gray;

    display: table;

    width: 70%;

    position:relative;

}



.container .left{

    background-color: tomato;

    width: 35%;

}



.container .right{

    position:absolute;

    top:0px;

    left:35%;

    background-color: orange;

    width: 65%;

    height:100%;

    overflow-y: auto;

}

answered May 23 '14 at 6:27

Hashbrown

5,81863958

add a comment |

I like to use pseudo elements to achieve this. You can use it as background of the content and let them fill the space.

With these approach you can set margins between columns, borders, etc.

.wrapper{

  position: relative;

  width: 200px;

}

.wrapper:before,

.wrapper:after{

  content: "";

  display: block;

  height: 100%;

  width: 40%;

  border: 2px solid blue;

  position: absolute;

  top: 0;

}

.wrapper:before{

  left: 0;

  background-color: red;

}

.wrapper:after{

  right: 0;

  background-color: green;

}



.div1, .div2{

  width: 40%;

  display: inline-block;

  position: relative;

  z-index: 1;

}

.div1{

  margin-right: 20%;

}

<div class="wrapper">

  <div class="div1">Content Content Content Content Content Content Content Content Content

  </div><div class="div2">Other</div>

</div>

answered Dec 15 '16 at 10:40

Adrian Menendez

420312

add a comment |

The CSS grid way

The modern way of doing this (which also avoids having to declare a <div class="row"></div>-wrapper around every two items) would be to make use of a CSS grid. This also gives you easy control on the gaps between your item rows/columns.

.grid-container {

  display: grid;

  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */

  grid-row-gap: 10px; 

  grid-column-gap: 10px;

}



.grid-item {

  background-color: #f8f8f8;

  box-shadow: 0 0 3px #666;

  text-align: center;

}



.grid-item img {

  max-width: 100%;

}

<div class="grid-container">

  <div class="grid-item">1 <br />1.1<br />1.1.1</div>

  <div class="grid-item">2</div>

  <div class="grid-item">3

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    3.1

  </div>

  <div class="grid-item">4</div>

  <div class="grid-item">5 <br />1.1<br />1.1.1</div>

  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />

    6.1</div>

  <div class="grid-item">7</div>

  <div class="grid-item">8</div>

  <div class="grid-item">9 <br />1.1<br />1.1.1</div>

  <div class="grid-item">10</div>

  <div class="grid-item">11

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    11.1

  </div>

  <div class="grid-item">12</div>

</div>

edited Jun 29 '18 at 14:29

answered Jun 29 '18 at 10:03

connexo

21.9k83557

add a comment |

you can use jQuery to achieve this easily.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {

    var leftHeight = $('.left').height();

    $('.right').css({'height':leftHeight});

});

HTML

   <div class="left">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>

   </div>

   <div class="right">

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

   </div>

You'll need to include jQuery

answered Jun 8 '10 at 14:14

pixeltocode

4,149104568

1

This will not work if both the <div> have dynamic content. The reason I say is if <div class="right"> have more content that the other problem arises.

– Viswalinga Surya S
Jan 17 '13 at 18:10

add a comment |

I know its been a long time but I share my solution anyway.
This is a jQuery trick.

--- HTML

<div class="custom-column">

    <div class="column-left">

        asd

        asd<br/>

        asd<br/>

    </div>

    <div class="column-right">

        asd

    </div>

</div>



<div class="custom-column">

    <div class="column-left">

        asd

    </div>

    <div class="column-right">

        asd

        asd<br/>

        asd<br/>

    </div>

</div>

---- CSS

<style>

.custom-column { margin-bottom:10px; }

.custom-column:after { clear:both; content:""; display:block; width:100%; }

    .column-left { float:left; width:25%; background:#CCC; }

    .column-right { float:right; width:75%; background:#EEE; }

</style>

--- JQUERY

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $balancer = function() {

        $('.custom-column').each(function(){

            if($('.column-left',this).height()>$('.column-right',this).height()){

                $('.column-right',this).height($('.column-left',this).height())

            } else {

                $('.column-left',this).height($('.column-right',this).height())

            }



        });



    }

    $balancer();

    $(window).load($balancer());

    $(window).resize($balancer());



});

</script>

answered Nov 17 '14 at 13:47

Roy Vincent

251

add a comment |

The Fiddle

HTML

<div class="container">



    <div class="left-column">



    </div>



    <div class="right-column">

        <h1>Hello Kitty!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

    </div>



</div>

CSS

.container {

    float: left;

    width: 100%;

    background-color: black;

    position: relative;

    left: 0;

}



.container:before,

.container:after {

    content: " ";

    display: table;

}



.container:after {

    clear: both;

}



.left-column {

    float: left;

    width: 30%;

    height: 100%;

    position: absolute;

    background: wheat;

}



.right-column {

    float: right;

    width: 70%;

    position: relative;

    padding: 0;

    margin: 0;

    background: rebeccapurple;            

}

answered Mar 30 '16 at 15:18

drjorgepolanco

2,8552629

add a comment |

-1

This is a jQuery plugin which sets the equal height for all elements on the same row(by checking the element's offset.top). So if your jQuery array contains elements from more than one row(different offset.top), each row will have a separated height, based on element with maximum height on that row.

jQuery.fn.setEqualHeight = function(){



var $elements = , max_height = ;



jQuery(this).css( 'min-height', 0 );



// GROUP ELEMENTS WHICH ARE ON THE SAME ROW

this.each(function(index, el){ 



    var offset_top = jQuery(el).offset().top;

    var el_height = jQuery(el).css('height');



    if( typeof $elements[offset_top] == "undefined" ){

        $elements[offset_top] = jQuery();

        max_height[offset_top] = 0;

    }



    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );



    if( parseInt(el_height) > parseInt(max_height[offset_top]) )

        max_height[offset_top] = el_height;



});



// CHANGE ELEMENTS HEIGHT

for( var offset_top in $elements ){



    if( jQuery($elements[offset_top]).length > 1 )

        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );



}

};

answered Mar 31 '15 at 7:55

Déján Kőŕdić

62288

add a comment |

-2

    var numexcute = 0;

    var interval;

    $(document).bind('click', function () {



        interval = setInterval(function () {

            if (numexcute >= 20) {

                clearInterval(interval);

                numexcute = 0;

            }

            $('#leftpane').css('height', 'auto');

            $('#rightpane').css('height', 'auto');

            if ($('#leftpane').height() < $('#rightpane').height())

                $('#leftpane').height($('#rightpane').height());

            if ($('#leftpane').height() > $('#rightpane').height())



                $('#rightpane').height($('#leftpane').height());

            numexcute++;

        }, 10);



    });

answered Jul 5 '13 at 22:05

tcao

245

1

Please supply any commentary to your answer.

– sgnsajgon
Jul 5 '13 at 22:30

add a comment |

-2

I was having the same problem so i created this small function using jquery as jquery is part of every web application nowadays.

function fEqualizeHeight(sSelector) {

    var sObjects = $(sSelector);



    var iCount = sObjects.length;



    var iHeights = ;



    if (iCount > 0) {

        $(sObjects).each(function () {

            var sHeight = $(this).css('height');

            var iHeight = parseInt(sHeight.replace(/px/i,''));

            iHeights.push(iHeight);

        });



        iHeights.sort(function (a, b) {

            return a - b

        });



        var iMaxHeight = iHeights.pop();



        $(sSelector).each(function () {

            $(this).css({

                'height': iMaxHeight + 'px'

            });

        });

    }

}

You can call this function on page ready event

$(document).ready(function(){

   fEqualizeHeight('.columns');

});

I hope this works for you.

answered Nov 21 '13 at 16:18

Master Programmer

41443

...as jquery is being removed from most web applications nowadays. Times are changing...

– connexo
Jun 29 '18 at 14:27

add a comment |

-3

I recently came across this and didn't really like the solutions so I tried experimenting.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

answered Nov 27 '13 at 3:19

tushar747

43421021

add a comment |

-4

<div>



<div style="border:1px solid #cccccc; float:left; min-height:200px;">



Some content!<br/>

Some content!<br/>

Some content!<br/>

Some content!<br/>

Some content!<br/>



</div>



<div style="border:1px solid #cccccc; float:left; min-height:200px;">



Some content!



</div>



</div>

What I did here is to change the height to min-height and gave it a fixed value. if one of them is getting resized the other one will stay the same height. not sure if this is what you want

answered Jun 8 '10 at 13:53

Wai Wong

90131117

The OP wanted the divs to always have the same height.

– Simon Forsberg
May 14 '12 at 11:16

add a comment |

protected by Community♦ Dec 19 '14 at 13:54

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

20 Answers
20

active

oldest

votes

20 Answers
20

active

oldest

votes

493

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>

Prefixes may be required for older browsers, see browser support.

edited Oct 19 '16 at 12:09

answered Dec 18 '13 at 22:13

Pavlo

24.3k96696

13

flexbox worked like a charm. If you are developing a responsive design and you want your second div to go down in smaller screens you will need to set .row to display: block; in your media query.

– Nick Zulu
Dec 30 '13 at 2:10

4

@NickZulu I believe in this case you should set flex-direction: column: jsfiddle.net/sdsgW/1

– Pavlo
Dec 30 '13 at 9:42

1

@Eckstein it is not required for both solutions. See demos.

– Pavlo
Oct 7 '14 at 5:51

2

this wasn't working for me until I added height:100%; to the children columns

– Jacob Raccuia
Jun 21 '16 at 4:10

1

Is it possible to make one specific child div determine the height of the other? So that if the content of other child div is changing, it can't change the height of that specific div

– Narek
Apr 15 '17 at 7:03

|
show 10 more comments

493

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>

Prefixes may be required for older browsers, see browser support.

edited Oct 19 '16 at 12:09

answered Dec 18 '13 at 22:13

Pavlo

24.3k96696

13

flexbox worked like a charm. If you are developing a responsive design and you want your second div to go down in smaller screens you will need to set .row to display: block; in your media query.

– Nick Zulu
Dec 30 '13 at 2:10

4

@NickZulu I believe in this case you should set flex-direction: column: jsfiddle.net/sdsgW/1

– Pavlo
Dec 30 '13 at 9:42

1

@Eckstein it is not required for both solutions. See demos.

– Pavlo
Oct 7 '14 at 5:51

2

this wasn't working for me until I added height:100%; to the children columns

– Jacob Raccuia
Jun 21 '16 at 4:10

1

Is it possible to make one specific child div determine the height of the other? So that if the content of other child div is changing, it can't change the height of that specific div

– Narek
Apr 15 '17 at 7:03

|
show 10 more comments

493

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>

Prefixes may be required for older browsers, see browser support.

edited Oct 19 '16 at 12:09

answered Dec 18 '13 at 22:13

Pavlo

24.3k96696

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>

Prefixes may be required for older browsers, see browser support.

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

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

edited Oct 19 '16 at 12:09

answered Dec 18 '13 at 22:13

Pavlo

24.3k96696

edited Oct 19 '16 at 12:09

answered Dec 18 '13 at 22:13

Pavlo

24.3k96696

answered Dec 18 '13 at 22:13

Pavlo

24.3k96696

answered Dec 18 '13 at 22:13

Pavlo

24.3k96696

13

flexbox worked like a charm. If you are developing a responsive design and you want your second div to go down in smaller screens you will need to set .row to display: block; in your media query.

– Nick Zulu
Dec 30 '13 at 2:10

4

@NickZulu I believe in this case you should set flex-direction: column: jsfiddle.net/sdsgW/1

– Pavlo
Dec 30 '13 at 9:42

1

@Eckstein it is not required for both solutions. See demos.

– Pavlo
Oct 7 '14 at 5:51

2

this wasn't working for me until I added height:100%; to the children columns

– Jacob Raccuia
Jun 21 '16 at 4:10

1

Is it possible to make one specific child div determine the height of the other? So that if the content of other child div is changing, it can't change the height of that specific div

– Narek
Apr 15 '17 at 7:03

|
show 10 more comments

13

flexbox worked like a charm. If you are developing a responsive design and you want your second div to go down in smaller screens you will need to set .row to display: block; in your media query.

– Nick Zulu
Dec 30 '13 at 2:10

4

@NickZulu I believe in this case you should set flex-direction: column: jsfiddle.net/sdsgW/1

– Pavlo
Dec 30 '13 at 9:42

1

@Eckstein it is not required for both solutions. See demos.

– Pavlo
Oct 7 '14 at 5:51

2

this wasn't working for me until I added height:100%; to the children columns

– Jacob Raccuia
Jun 21 '16 at 4:10

1

Is it possible to make one specific child div determine the height of the other? So that if the content of other child div is changing, it can't change the height of that specific div

– Narek
Apr 15 '17 at 7:03

flexbox worked like a charm. If you are developing a responsive design and you want your second div to go down in smaller screens you will need to set .row to display: block; in your media query.

– Nick Zulu
Dec 30 '13 at 2:10

@NickZulu I believe in this case you should set flex-direction: column: jsfiddle.net/sdsgW/1

– Pavlo
Dec 30 '13 at 9:42

@Eckstein it is not required for both solutions. See demos.

– Pavlo
Oct 7 '14 at 5:51

this wasn't working for me until I added height:100%; to the children columns

– Jacob Raccuia
Jun 21 '16 at 4:10

Is it possible to make one specific child div determine the height of the other? So that if the content of other child div is changing, it can't change the height of that specific div

– Narek
Apr 15 '17 at 7:03

|
show 10 more comments

140

This is a common problem which many have encountered, but luckily some smart minds like Ed Eliot's on his blog have posted their solutions online.

.container {

    overflow: hidden;

}

.column {

    float: left;

    margin: 20px;

    background-color: grey;

    padding-bottom: 100%;

    margin-bottom: -100%;

}

<div class="container">



    <div class="column">

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

    </div>



    <div class="column">

        Something

    </div>



</div>

edited Aug 14 '18 at 13:44

community wiki

8 revs, 5 users 59%
lambda

1

Explanation on One True Layout was a bit poor, but after checking the first link I implemented it fine from one of the examples he used. However it's really bad because you have to use an image to represent the bottom border of the columns, and it's dubious for cross-browser support. However it does work and it doesn't rely on javascript, so I'm going to mark it as correct. Thanks!

– NibblyPig
Jun 8 '10 at 14:15

This doesn't seem to work in old IE browsers (yes, unfortunately I still have to support IE6). Any way to make this compatible?

– strongriley
Mar 20 '12 at 14:39

1

@strongriley Checkout Ed Eliot's blog: ejeliot.com/blog/61 It should work in IE6. Maybe the problem is caused elsewhere?

– mqchen
Mar 22 '12 at 8:47

1

This breaks if the window is too narrow and the divs are placed beneath each other.

– WhyNotHugo
Aug 17 '13 at 5:13

1

How do you define the cell padding you actually want present in the table cell, eg padding: 7px 10px, if the padding-bottom property is set to 100%? (PS overflow:hidden was also required for me on the row)

– user1063287
Mar 19 '18 at 4:23

|
show 2 more comments

140

This is a common problem which many have encountered, but luckily some smart minds like Ed Eliot's on his blog have posted their solutions online.

.container {

    overflow: hidden;

}

.column {

    float: left;

    margin: 20px;

    background-color: grey;

    padding-bottom: 100%;

    margin-bottom: -100%;

}

<div class="container">



    <div class="column">

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

    </div>



    <div class="column">

        Something

    </div>



</div>

edited Aug 14 '18 at 13:44

community wiki

8 revs, 5 users 59%
lambda

1

Explanation on One True Layout was a bit poor, but after checking the first link I implemented it fine from one of the examples he used. However it's really bad because you have to use an image to represent the bottom border of the columns, and it's dubious for cross-browser support. However it does work and it doesn't rely on javascript, so I'm going to mark it as correct. Thanks!

– NibblyPig
Jun 8 '10 at 14:15

This doesn't seem to work in old IE browsers (yes, unfortunately I still have to support IE6). Any way to make this compatible?

– strongriley
Mar 20 '12 at 14:39

1

@strongriley Checkout Ed Eliot's blog: ejeliot.com/blog/61 It should work in IE6. Maybe the problem is caused elsewhere?

– mqchen
Mar 22 '12 at 8:47

1

This breaks if the window is too narrow and the divs are placed beneath each other.

– WhyNotHugo
Aug 17 '13 at 5:13

1

How do you define the cell padding you actually want present in the table cell, eg padding: 7px 10px, if the padding-bottom property is set to 100%? (PS overflow:hidden was also required for me on the row)

– user1063287
Mar 19 '18 at 4:23

|
show 2 more comments

140

This is a common problem which many have encountered, but luckily some smart minds like Ed Eliot's on his blog have posted their solutions online.

.container {

    overflow: hidden;

}

.column {

    float: left;

    margin: 20px;

    background-color: grey;

    padding-bottom: 100%;

    margin-bottom: -100%;

}

<div class="container">



    <div class="column">

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

    </div>



    <div class="column">

        Something

    </div>



</div>

edited Aug 14 '18 at 13:44

community wiki

8 revs, 5 users 59%
lambda

This is a common problem which many have encountered, but luckily some smart minds like Ed Eliot's on his blog have posted their solutions online.

.container {

    overflow: hidden;

}

.column {

    float: left;

    margin: 20px;

    background-color: grey;

    padding-bottom: 100%;

    margin-bottom: -100%;

}

<div class="container">



    <div class="column">

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

    </div>



    <div class="column">

        Something

    </div>



</div>

.container {

    overflow: hidden;

}

.column {

    float: left;

    margin: 20px;

    background-color: grey;

    padding-bottom: 100%;

    margin-bottom: -100%;

}

<div class="container">



    <div class="column">

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

    </div>



    <div class="column">

        Something

    </div>



</div>

.container {

    overflow: hidden;

}

.column {

    float: left;

    margin: 20px;

    background-color: grey;

    padding-bottom: 100%;

    margin-bottom: -100%;

}

<div class="container">



    <div class="column">

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

    </div>



    <div class="column">

        Something

    </div>



</div>

edited Aug 14 '18 at 13:44

community wiki

8 revs, 5 users 59%
lambda

edited Aug 14 '18 at 13:44

community wiki

8 revs, 5 users 59%
lambda

community wiki

8 revs, 5 users 59%
lambda

community wiki

8 revs, 5 users 59%
lambda

1

Explanation on One True Layout was a bit poor, but after checking the first link I implemented it fine from one of the examples he used. However it's really bad because you have to use an image to represent the bottom border of the columns, and it's dubious for cross-browser support. However it does work and it doesn't rely on javascript, so I'm going to mark it as correct. Thanks!

– NibblyPig
Jun 8 '10 at 14:15

This doesn't seem to work in old IE browsers (yes, unfortunately I still have to support IE6). Any way to make this compatible?

– strongriley
Mar 20 '12 at 14:39

1

@strongriley Checkout Ed Eliot's blog: ejeliot.com/blog/61 It should work in IE6. Maybe the problem is caused elsewhere?

– mqchen
Mar 22 '12 at 8:47

1

This breaks if the window is too narrow and the divs are placed beneath each other.

– WhyNotHugo
Aug 17 '13 at 5:13

1

How do you define the cell padding you actually want present in the table cell, eg padding: 7px 10px, if the padding-bottom property is set to 100%? (PS overflow:hidden was also required for me on the row)

– user1063287
Mar 19 '18 at 4:23

|
show 2 more comments

1

Explanation on One True Layout was a bit poor, but after checking the first link I implemented it fine from one of the examples he used. However it's really bad because you have to use an image to represent the bottom border of the columns, and it's dubious for cross-browser support. However it does work and it doesn't rely on javascript, so I'm going to mark it as correct. Thanks!

– NibblyPig
Jun 8 '10 at 14:15

This doesn't seem to work in old IE browsers (yes, unfortunately I still have to support IE6). Any way to make this compatible?

– strongriley
Mar 20 '12 at 14:39

1

@strongriley Checkout Ed Eliot's blog: ejeliot.com/blog/61 It should work in IE6. Maybe the problem is caused elsewhere?

– mqchen
Mar 22 '12 at 8:47

1

This breaks if the window is too narrow and the divs are placed beneath each other.

– WhyNotHugo
Aug 17 '13 at 5:13

1

How do you define the cell padding you actually want present in the table cell, eg padding: 7px 10px, if the padding-bottom property is set to 100%? (PS overflow:hidden was also required for me on the row)

– user1063287
Mar 19 '18 at 4:23

Explanation on One True Layout was a bit poor, but after checking the first link I implemented it fine from one of the examples he used. However it's really bad because you have to use an image to represent the bottom border of the columns, and it's dubious for cross-browser support. However it does work and it doesn't rely on javascript, so I'm going to mark it as correct. Thanks!

– NibblyPig
Jun 8 '10 at 14:15

This doesn't seem to work in old IE browsers (yes, unfortunately I still have to support IE6). Any way to make this compatible?

– strongriley
Mar 20 '12 at 14:39

@strongriley Checkout Ed Eliot's blog: ejeliot.com/blog/61 It should work in IE6. Maybe the problem is caused elsewhere?

– mqchen
Mar 22 '12 at 8:47

This breaks if the window is too narrow and the divs are placed beneath each other.

– WhyNotHugo
Aug 17 '13 at 5:13

How do you define the cell padding you actually want present in the table cell, eg padding: 7px 10px, if the padding-bottom property is set to 100%? (PS overflow:hidden was also required for me on the row)

– user1063287
Mar 19 '18 at 4:23

|
show 2 more comments

<div style="display: table-row;">



    <div style="border:1px solid #cccccc; display: table-cell;">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>



    <div style="border:1px solid #cccccc;  display: table-cell;">

        Some content!

    </div>



</div>

This works in all versions of Firefox, Chrome and Safari, Opera from at least version 8, and in IE from version 8.

edited Aug 23 '13 at 15:01

community wiki

4 revs, 2 users 90%
Paul D. Waite

5

This solution is not available to those who need to support IE6/IE7, but I believe it's the cleanest.

– twsaef
Jun 21 '12 at 6:40

1

this answer is PERFECT! just a small reminder: it might happen that some client requires "table" instead of "table-row"

– tiborka
Feb 19 '13 at 0:51

@user2025810: aw, thank you. Do you know which clients require table instead of table-row?

– Paul D. Waite
Feb 19 '13 at 1:17

@user2025810: yikes, can't say I've ever tested in that :) Good to know though, cheers. (Given its PDF focus I bet it supports some of the print-related features of CSS 2.1 that aren't implemented very well in browsers.)

– Paul D. Waite
Feb 19 '13 at 17:02

7

With this solution - forget about using percentage width for your divs, unless you add display: table on the parent element, which will mess things up.

– Alex G
Aug 27 '13 at 13:57

|
show 1 more comment

<div style="display: table-row;">



    <div style="border:1px solid #cccccc; display: table-cell;">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>



    <div style="border:1px solid #cccccc;  display: table-cell;">

        Some content!

    </div>



</div>

This works in all versions of Firefox, Chrome and Safari, Opera from at least version 8, and in IE from version 8.

edited Aug 23 '13 at 15:01

community wiki

4 revs, 2 users 90%
Paul D. Waite

5

This solution is not available to those who need to support IE6/IE7, but I believe it's the cleanest.

– twsaef
Jun 21 '12 at 6:40

1

this answer is PERFECT! just a small reminder: it might happen that some client requires "table" instead of "table-row"

– tiborka
Feb 19 '13 at 0:51

@user2025810: aw, thank you. Do you know which clients require table instead of table-row?

– Paul D. Waite
Feb 19 '13 at 1:17

@user2025810: yikes, can't say I've ever tested in that :) Good to know though, cheers. (Given its PDF focus I bet it supports some of the print-related features of CSS 2.1 that aren't implemented very well in browsers.)

– Paul D. Waite
Feb 19 '13 at 17:02

7

With this solution - forget about using percentage width for your divs, unless you add display: table on the parent element, which will mess things up.

– Alex G
Aug 27 '13 at 13:57

|
show 1 more comment

<div style="display: table-row;">



    <div style="border:1px solid #cccccc; display: table-cell;">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>



    <div style="border:1px solid #cccccc;  display: table-cell;">

        Some content!

    </div>



</div>

This works in all versions of Firefox, Chrome and Safari, Opera from at least version 8, and in IE from version 8.

edited Aug 23 '13 at 15:01

community wiki

4 revs, 2 users 90%
Paul D. Waite

<div style="display: table-row;">



    <div style="border:1px solid #cccccc; display: table-cell;">

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

        Some content!<br/>

    </div>



    <div style="border:1px solid #cccccc;  display: table-cell;">

        Some content!

    </div>



</div>

This works in all versions of Firefox, Chrome and Safari, Opera from at least version 8, and in IE from version 8.

edited Aug 23 '13 at 15:01

community wiki

4 revs, 2 users 90%
Paul D. Waite

edited Aug 23 '13 at 15:01

community wiki

4 revs, 2 users 90%
Paul D. Waite

community wiki

4 revs, 2 users 90%
Paul D. Waite

community wiki

4 revs, 2 users 90%
Paul D. Waite

5

This solution is not available to those who need to support IE6/IE7, but I believe it's the cleanest.

– twsaef
Jun 21 '12 at 6:40

1

this answer is PERFECT! just a small reminder: it might happen that some client requires "table" instead of "table-row"

– tiborka
Feb 19 '13 at 0:51

@user2025810: aw, thank you. Do you know which clients require table instead of table-row?

– Paul D. Waite
Feb 19 '13 at 1:17

@user2025810: yikes, can't say I've ever tested in that :) Good to know though, cheers. (Given its PDF focus I bet it supports some of the print-related features of CSS 2.1 that aren't implemented very well in browsers.)

– Paul D. Waite
Feb 19 '13 at 17:02

7

With this solution - forget about using percentage width for your divs, unless you add display: table on the parent element, which will mess things up.

– Alex G
Aug 27 '13 at 13:57

|
show 1 more comment

5

This solution is not available to those who need to support IE6/IE7, but I believe it's the cleanest.

– twsaef
Jun 21 '12 at 6:40

1

this answer is PERFECT! just a small reminder: it might happen that some client requires "table" instead of "table-row"

– tiborka
Feb 19 '13 at 0:51

@user2025810: aw, thank you. Do you know which clients require table instead of table-row?

– Paul D. Waite
Feb 19 '13 at 1:17

@user2025810: yikes, can't say I've ever tested in that :) Good to know though, cheers. (Given its PDF focus I bet it supports some of the print-related features of CSS 2.1 that aren't implemented very well in browsers.)

– Paul D. Waite
Feb 19 '13 at 17:02

7

With this solution - forget about using percentage width for your divs, unless you add display: table on the parent element, which will mess things up.

– Alex G
Aug 27 '13 at 13:57

This solution is not available to those who need to support IE6/IE7, but I believe it's the cleanest.

– twsaef
Jun 21 '12 at 6:40

this answer is PERFECT! just a small reminder: it might happen that some client requires "table" instead of "table-row"

– tiborka
Feb 19 '13 at 0:51

@user2025810: aw, thank you. Do you know which clients require table instead of table-row?

– Paul D. Waite
Feb 19 '13 at 1:17

@user2025810: yikes, can't say I've ever tested in that :) Good to know though, cheers. (Given its PDF focus I bet it supports some of the print-related features of CSS 2.1 that aren't implemented very well in browsers.)

– Paul D. Waite
Feb 19 '13 at 17:02

With this solution - forget about using percentage width for your divs, unless you add display: table on the parent element, which will mess things up.

– Alex G
Aug 27 '13 at 13:57

|
show 1 more comment

Using Javascript

using jQuery you can do it in a super simple one-line-script.

// HTML

<div id="columnOne">

</div>



<div id="columnTwo">

</div>



// Javascript

$("#columnTwo").height($("#columnOne").height());

Using CSS

edited Aug 30 '16 at 12:56

lambda

2,40012028

answered Jun 8 '10 at 14:14

Derek Adair

11.2k2785129

I think using JavaScript is a very good method. The problem is - it falls apart if disabled. I think I will use this anyway and build the best contingency I can ;--) Thanks!

– nicorellius
Jul 2 '12 at 4:50

9

This implies that columnOne'S height is always bigger than columnTwo.

– Sébastien Richer
Apr 12 '14 at 14:32

1

You should compare height of columns before applying the height for them. I think js is the best method for this problem, almost all browsers are js enabled, if not, they should get out of your website and many other websites.

– SalmanShariati
Dec 25 '14 at 12:44

6

This will also only work when the page is first loaded. If the window is then resized, causing the divs to resize then they will not stay in sync

– ikariw
Apr 29 '15 at 14:05

add a comment |

Using Javascript

using jQuery you can do it in a super simple one-line-script.

// HTML

<div id="columnOne">

</div>



<div id="columnTwo">

</div>



// Javascript

$("#columnTwo").height($("#columnOne").height());

Using CSS

edited Aug 30 '16 at 12:56

lambda

2,40012028

answered Jun 8 '10 at 14:14

Derek Adair

11.2k2785129

I think using JavaScript is a very good method. The problem is - it falls apart if disabled. I think I will use this anyway and build the best contingency I can ;--) Thanks!

– nicorellius
Jul 2 '12 at 4:50

9

This implies that columnOne'S height is always bigger than columnTwo.

– Sébastien Richer
Apr 12 '14 at 14:32

1

You should compare height of columns before applying the height for them. I think js is the best method for this problem, almost all browsers are js enabled, if not, they should get out of your website and many other websites.

– SalmanShariati
Dec 25 '14 at 12:44

6

This will also only work when the page is first loaded. If the window is then resized, causing the divs to resize then they will not stay in sync

– ikariw
Apr 29 '15 at 14:05

add a comment |

Using Javascript

using jQuery you can do it in a super simple one-line-script.

// HTML

<div id="columnOne">

</div>



<div id="columnTwo">

</div>



// Javascript

$("#columnTwo").height($("#columnOne").height());

Using CSS

edited Aug 30 '16 at 12:56

lambda

2,40012028

answered Jun 8 '10 at 14:14

Derek Adair

11.2k2785129

Using Javascript

using jQuery you can do it in a super simple one-line-script.

// HTML

<div id="columnOne">

</div>



<div id="columnTwo">

</div>



// Javascript

$("#columnTwo").height($("#columnOne").height());

Using CSS

edited Aug 30 '16 at 12:56

lambda

2,40012028

answered Jun 8 '10 at 14:14

Derek Adair

11.2k2785129

edited Aug 30 '16 at 12:56

lambda

2,40012028

edited Aug 30 '16 at 12:56

lambda

2,40012028

edited Aug 30 '16 at 12:56

lambda

2,40012028

answered Jun 8 '10 at 14:14

Derek Adair

11.2k2785129

answered Jun 8 '10 at 14:14

Derek Adair

11.2k2785129

answered Jun 8 '10 at 14:14

Derek Adair

11.2k2785129

I think using JavaScript is a very good method. The problem is - it falls apart if disabled. I think I will use this anyway and build the best contingency I can ;--) Thanks!

– nicorellius
Jul 2 '12 at 4:50

9

This implies that columnOne'S height is always bigger than columnTwo.

– Sébastien Richer
Apr 12 '14 at 14:32

1

You should compare height of columns before applying the height for them. I think js is the best method for this problem, almost all browsers are js enabled, if not, they should get out of your website and many other websites.

– SalmanShariati
Dec 25 '14 at 12:44

6

This will also only work when the page is first loaded. If the window is then resized, causing the divs to resize then they will not stay in sync

– ikariw
Apr 29 '15 at 14:05

add a comment |

I think using JavaScript is a very good method. The problem is - it falls apart if disabled. I think I will use this anyway and build the best contingency I can ;--) Thanks!

– nicorellius
Jul 2 '12 at 4:50

9

This implies that columnOne'S height is always bigger than columnTwo.

– Sébastien Richer
Apr 12 '14 at 14:32

1

You should compare height of columns before applying the height for them. I think js is the best method for this problem, almost all browsers are js enabled, if not, they should get out of your website and many other websites.

– SalmanShariati
Dec 25 '14 at 12:44

6

This will also only work when the page is first loaded. If the window is then resized, causing the divs to resize then they will not stay in sync

– ikariw
Apr 29 '15 at 14:05

I think using JavaScript is a very good method. The problem is - it falls apart if disabled. I think I will use this anyway and build the best contingency I can ;--) Thanks!

– nicorellius
Jul 2 '12 at 4:50

This implies that columnOne'S height is always bigger than columnTwo.

– Sébastien Richer
Apr 12 '14 at 14:32

You should compare height of columns before applying the height for them. I think js is the best method for this problem, almost all browsers are js enabled, if not, they should get out of your website and many other websites.

– SalmanShariati
Dec 25 '14 at 12:44

This will also only work when the page is first loaded. If the window is then resized, causing the divs to resize then they will not stay in sync

– ikariw
Apr 29 '15 at 14:05

add a comment |

I'm surprised that nobody has mentioned the (very old but reliable) Absolute Columns technique:
http://24ways.org/2008/absolute-columns/

In my opinion, it is far superior to both Faux Columns and One True Layout's technique.

<!DOCTYPE html>

<html>

  <head>

    <style>

      #container

      {

        position: relative;

      }



      #left-column

      {

        width: 50%;

        background-color: pink;

      }



      #right-column

      {

        position: absolute;

        top: 0px;

        right: 0px;

        bottom: 0px;

        width: 50%;

        background-color: teal;

      }

    </style>

  </head>

  <body>

    <div id="container">

      <div id="left-column">

        <ul>

          <li>Foo</li>

          <li>Bar</li>

          <li>Baz</li>

        </ul>

      </div>

      <div id="right-column">

        Lorem ipsum

      </div>

    </div>

  </body>

</html>

answered Feb 6 '13 at 2:21

geofflee

1,87521722

1

If the right column has more lines than the left, content is overflow.

– David
Feb 12 '14 at 9:06

@David. You can switch the left and the right.

– Mad Physicist
Jan 7 '15 at 6:20

add a comment |

I'm surprised that nobody has mentioned the (very old but reliable) Absolute Columns technique:
http://24ways.org/2008/absolute-columns/

In my opinion, it is far superior to both Faux Columns and One True Layout's technique.

<!DOCTYPE html>

<html>

  <head>

    <style>

      #container

      {

        position: relative;

      }



      #left-column

      {

        width: 50%;

        background-color: pink;

      }



      #right-column

      {

        position: absolute;

        top: 0px;

        right: 0px;

        bottom: 0px;

        width: 50%;

        background-color: teal;

      }

    </style>

  </head>

  <body>

    <div id="container">

      <div id="left-column">

        <ul>

          <li>Foo</li>

          <li>Bar</li>

          <li>Baz</li>

        </ul>

      </div>

      <div id="right-column">

        Lorem ipsum

      </div>

    </div>

  </body>

</html>

answered Feb 6 '13 at 2:21

geofflee

1,87521722

1

If the right column has more lines than the left, content is overflow.

– David
Feb 12 '14 at 9:06

@David. You can switch the left and the right.

– Mad Physicist
Jan 7 '15 at 6:20

add a comment |

I'm surprised that nobody has mentioned the (very old but reliable) Absolute Columns technique:
http://24ways.org/2008/absolute-columns/

In my opinion, it is far superior to both Faux Columns and One True Layout's technique.

<!DOCTYPE html>

<html>

  <head>

    <style>

      #container

      {

        position: relative;

      }



      #left-column

      {

        width: 50%;

        background-color: pink;

      }



      #right-column

      {

        position: absolute;

        top: 0px;

        right: 0px;

        bottom: 0px;

        width: 50%;

        background-color: teal;

      }

    </style>

  </head>

  <body>

    <div id="container">

      <div id="left-column">

        <ul>

          <li>Foo</li>

          <li>Bar</li>

          <li>Baz</li>

        </ul>

      </div>

      <div id="right-column">

        Lorem ipsum

      </div>

    </div>

  </body>

</html>

answered Feb 6 '13 at 2:21

geofflee

1,87521722

I'm surprised that nobody has mentioned the (very old but reliable) Absolute Columns technique:
http://24ways.org/2008/absolute-columns/

In my opinion, it is far superior to both Faux Columns and One True Layout's technique.

<!DOCTYPE html>

<html>

  <head>

    <style>

      #container

      {

        position: relative;

      }



      #left-column

      {

        width: 50%;

        background-color: pink;

      }



      #right-column

      {

        position: absolute;

        top: 0px;

        right: 0px;

        bottom: 0px;

        width: 50%;

        background-color: teal;

      }

    </style>

  </head>

  <body>

    <div id="container">

      <div id="left-column">

        <ul>

          <li>Foo</li>

          <li>Bar</li>

          <li>Baz</li>

        </ul>

      </div>

      <div id="right-column">

        Lorem ipsum

      </div>

    </div>

  </body>

</html>

answered Feb 6 '13 at 2:21

geofflee

1,87521722

answered Feb 6 '13 at 2:21

geofflee

1,87521722

answered Feb 6 '13 at 2:21

geofflee

1,87521722

answered Feb 6 '13 at 2:21

geofflee

1,87521722

1

If the right column has more lines than the left, content is overflow.

– David
Feb 12 '14 at 9:06

@David. You can switch the left and the right.

– Mad Physicist
Jan 7 '15 at 6:20

add a comment |

1

If the right column has more lines than the left, content is overflow.

– David
Feb 12 '14 at 9:06

@David. You can switch the left and the right.

– Mad Physicist
Jan 7 '15 at 6:20

If the right column has more lines than the left, content is overflow.

– David
Feb 12 '14 at 9:06

@David. You can switch the left and the right.

– Mad Physicist
Jan 7 '15 at 6:20

add a comment |

You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow.

Here a sample of implementation

Usage: $(object).equalHeights([minHeight], [maxHeight]);



Example 1: $(".cols").equalHeights(); 

           Sets all columns to the same height.



Example 2: $(".cols").equalHeights(400); 

           Sets all cols to at least 400px tall.



Example 3: $(".cols").equalHeights(100,300); 

           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Here is the link

http://www.cssnewbie.com/equalheights-jquery-plugin/

answered Jun 8 '10 at 14:03

Starx

58.9k35157239

add a comment |

You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow.

Here a sample of implementation

Usage: $(object).equalHeights([minHeight], [maxHeight]);



Example 1: $(".cols").equalHeights(); 

           Sets all columns to the same height.



Example 2: $(".cols").equalHeights(400); 

           Sets all cols to at least 400px tall.



Example 3: $(".cols").equalHeights(100,300); 

           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Here is the link

http://www.cssnewbie.com/equalheights-jquery-plugin/

answered Jun 8 '10 at 14:03

Starx

58.9k35157239

add a comment |

You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow.

Here a sample of implementation

Usage: $(object).equalHeights([minHeight], [maxHeight]);



Example 1: $(".cols").equalHeights(); 

           Sets all columns to the same height.



Example 2: $(".cols").equalHeights(400); 

           Sets all cols to at least 400px tall.



Example 3: $(".cols").equalHeights(100,300); 

           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Here is the link

http://www.cssnewbie.com/equalheights-jquery-plugin/

answered Jun 8 '10 at 14:03

Starx

58.9k35157239

You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow.

Here a sample of implementation

Usage: $(object).equalHeights([minHeight], [maxHeight]);



Example 1: $(".cols").equalHeights(); 

           Sets all columns to the same height.



Example 2: $(".cols").equalHeights(400); 

           Sets all cols to at least 400px tall.



Example 3: $(".cols").equalHeights(100,300); 

           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Here is the link

http://www.cssnewbie.com/equalheights-jquery-plugin/

answered Jun 8 '10 at 14:03

Starx

58.9k35157239

answered Jun 8 '10 at 14:03

Starx

58.9k35157239

answered Jun 8 '10 at 14:03

Starx

58.9k35157239

answered Jun 8 '10 at 14:03

Starx

58.9k35157239

add a comment |

You could use Faux Columns.

Only works with fixed-width boxes though.

Well tested out and properly working in every browser.

edited Jan 7 '15 at 12:14

answered Jun 8 '10 at 16:24

Arve Systad

4,65012655

add a comment |

You could use Faux Columns.

Only works with fixed-width boxes though.

Well tested out and properly working in every browser.

edited Jan 7 '15 at 12:14

answered Jun 8 '10 at 16:24

Arve Systad

4,65012655

add a comment |

You could use Faux Columns.

Only works with fixed-width boxes though.

Well tested out and properly working in every browser.

edited Jan 7 '15 at 12:14

answered Jun 8 '10 at 16:24

Arve Systad

4,65012655

You could use Faux Columns.

Only works with fixed-width boxes though.

Well tested out and properly working in every browser.

edited Jan 7 '15 at 12:14

answered Jun 8 '10 at 16:24

Arve Systad

4,65012655

edited Jan 7 '15 at 12:14

answered Jun 8 '10 at 16:24

Arve Systad

4,65012655

answered Jun 8 '10 at 16:24

Arve Systad

4,65012655

answered Jun 8 '10 at 16:24

Arve Systad

4,65012655

add a comment |

Just spotted this thread while searching for this very answer. I just made a small jQuery function, hope this helps, works like a charm:

JAVASCRIPT

var maxHeight = 0;

$('.inner').each(function() {

    maxHeight = Math.max(maxHeight, $(this).height());

});

$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">

    <div class="inner">

        Content in here

    </div>

</div>

<div class="rhs_content">

    <div class="inner">

        More content in here

    </div>

</div>

answered Dec 5 '13 at 15:34

Mike Wells

24943

1

I used outerHeight to include padding and borders. This is the cleanest solution I think.

– Sébastien Richer
Apr 12 '14 at 14:35

Perfect solution I was looking for. Other solutions are good for case that a row has a few columns but this approach is better for complex html content. Small adding: When document resize in responsive page, content height doesn't change because of fixed. So, I added $('.inner').css({ height: "initial" }); before 'each function' to set height to default.

– bafsar
Mar 5 '17 at 7:10

add a comment |

Just spotted this thread while searching for this very answer. I just made a small jQuery function, hope this helps, works like a charm:

JAVASCRIPT

var maxHeight = 0;

$('.inner').each(function() {

    maxHeight = Math.max(maxHeight, $(this).height());

});

$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">

    <div class="inner">

        Content in here

    </div>

</div>

<div class="rhs_content">

    <div class="inner">

        More content in here

    </div>

</div>

answered Dec 5 '13 at 15:34

Mike Wells

24943

1

I used outerHeight to include padding and borders. This is the cleanest solution I think.

– Sébastien Richer
Apr 12 '14 at 14:35

Perfect solution I was looking for. Other solutions are good for case that a row has a few columns but this approach is better for complex html content. Small adding: When document resize in responsive page, content height doesn't change because of fixed. So, I added $('.inner').css({ height: "initial" }); before 'each function' to set height to default.

– bafsar
Mar 5 '17 at 7:10

add a comment |

Just spotted this thread while searching for this very answer. I just made a small jQuery function, hope this helps, works like a charm:

JAVASCRIPT

var maxHeight = 0;

$('.inner').each(function() {

    maxHeight = Math.max(maxHeight, $(this).height());

});

$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">

    <div class="inner">

        Content in here

    </div>

</div>

<div class="rhs_content">

    <div class="inner">

        More content in here

    </div>

</div>

answered Dec 5 '13 at 15:34

Mike Wells

24943

Just spotted this thread while searching for this very answer. I just made a small jQuery function, hope this helps, works like a charm:

JAVASCRIPT

var maxHeight = 0;

$('.inner').each(function() {

    maxHeight = Math.max(maxHeight, $(this).height());

});

$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">

    <div class="inner">

        Content in here

    </div>

</div>

<div class="rhs_content">

    <div class="inner">

        More content in here

    </div>

</div>

answered Dec 5 '13 at 15:34

Mike Wells

24943

answered Dec 5 '13 at 15:34

Mike Wells

24943

answered Dec 5 '13 at 15:34

Mike Wells

24943

answered Dec 5 '13 at 15:34

Mike Wells

24943

1

I used outerHeight to include padding and borders. This is the cleanest solution I think.

– Sébastien Richer
Apr 12 '14 at 14:35

Perfect solution I was looking for. Other solutions are good for case that a row has a few columns but this approach is better for complex html content. Small adding: When document resize in responsive page, content height doesn't change because of fixed. So, I added $('.inner').css({ height: "initial" }); before 'each function' to set height to default.

– bafsar
Mar 5 '17 at 7:10

add a comment |

1

I used outerHeight to include padding and borders. This is the cleanest solution I think.

– Sébastien Richer
Apr 12 '14 at 14:35

Perfect solution I was looking for. Other solutions are good for case that a row has a few columns but this approach is better for complex html content. Small adding: When document resize in responsive page, content height doesn't change because of fixed. So, I added $('.inner').css({ height: "initial" }); before 'each function' to set height to default.

– bafsar
Mar 5 '17 at 7:10

I used outerHeight to include padding and borders. This is the cleanest solution I think.

– Sébastien Richer
Apr 12 '14 at 14:35

Perfect solution I was looking for. Other solutions are good for case that a row has a few columns but this approach is better for complex html content. Small adding: When document resize in responsive page, content height doesn't change because of fixed. So, I added $('.inner').css({ height: "initial" }); before 'each function' to set height to default.

– bafsar
Mar 5 '17 at 7:10

add a comment |

This question was asked 6 years ago, but it's still worthy to give a simple answer with flexbox layout nowadays.

Just add the following CSS to the father <div>, it will work.

display: -webkit-flex;

display: flex;

flex-direction: row;

align-items: stretch;

answered Nov 17 '16 at 8:34

Hegwin

115111

1

The accepted answer uses flexbox already.

– TylerH
Nov 18 '16 at 19:38

1

@TylerH But asked has edited his question and added I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height. which is not mentioned in the accepted answer...I just made a completion here. Maybe I should have commented it on the accepted answer?

– Hegwin
Nov 22 '16 at 2:30

1

it's not mentioned explicitly because it's covered already by the simple CSS declaration already. Open up the answer's Snippet in fullscreen and resize your browser window to see; they stay the same size as each other.

– TylerH
Nov 26 '16 at 4:34

1

Even if the accepted answer uses flexbox, this one has a different approach. align-items: stretch is what set me on the path to solving my problem in a very particular situation.

– BenoitLussier
Jun 13 '18 at 0:20

Isn't align-items: stretch; flex's default?

– madav
Sep 17 '18 at 4:57

add a comment |

This question was asked 6 years ago, but it's still worthy to give a simple answer with flexbox layout nowadays.

Just add the following CSS to the father <div>, it will work.

display: -webkit-flex;

display: flex;

flex-direction: row;

align-items: stretch;

answered Nov 17 '16 at 8:34

Hegwin

115111

1

The accepted answer uses flexbox already.

– TylerH
Nov 18 '16 at 19:38

1

@TylerH But asked has edited his question and added I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height. which is not mentioned in the accepted answer...I just made a completion here. Maybe I should have commented it on the accepted answer?

– Hegwin
Nov 22 '16 at 2:30

1

it's not mentioned explicitly because it's covered already by the simple CSS declaration already. Open up the answer's Snippet in fullscreen and resize your browser window to see; they stay the same size as each other.

– TylerH
Nov 26 '16 at 4:34

1

Even if the accepted answer uses flexbox, this one has a different approach. align-items: stretch is what set me on the path to solving my problem in a very particular situation.

– BenoitLussier
Jun 13 '18 at 0:20

Isn't align-items: stretch; flex's default?

– madav
Sep 17 '18 at 4:57

add a comment |

This question was asked 6 years ago, but it's still worthy to give a simple answer with flexbox layout nowadays.

Just add the following CSS to the father <div>, it will work.

display: -webkit-flex;

display: flex;

flex-direction: row;

align-items: stretch;

answered Nov 17 '16 at 8:34

Hegwin

115111

This question was asked 6 years ago, but it's still worthy to give a simple answer with flexbox layout nowadays.

Just add the following CSS to the father <div>, it will work.

display: -webkit-flex;

display: flex;

flex-direction: row;

align-items: stretch;

answered Nov 17 '16 at 8:34

Hegwin

115111

answered Nov 17 '16 at 8:34

Hegwin

115111

answered Nov 17 '16 at 8:34

Hegwin

115111

answered Nov 17 '16 at 8:34

Hegwin

115111

1

The accepted answer uses flexbox already.

– TylerH
Nov 18 '16 at 19:38

1

@TylerH But asked has edited his question and added I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height. which is not mentioned in the accepted answer...I just made a completion here. Maybe I should have commented it on the accepted answer?

– Hegwin
Nov 22 '16 at 2:30

1

it's not mentioned explicitly because it's covered already by the simple CSS declaration already. Open up the answer's Snippet in fullscreen and resize your browser window to see; they stay the same size as each other.

– TylerH
Nov 26 '16 at 4:34

1

Even if the accepted answer uses flexbox, this one has a different approach. align-items: stretch is what set me on the path to solving my problem in a very particular situation.

– BenoitLussier
Jun 13 '18 at 0:20

Isn't align-items: stretch; flex's default?

– madav
Sep 17 '18 at 4:57

add a comment |

1

The accepted answer uses flexbox already.

– TylerH
Nov 18 '16 at 19:38

1

@TylerH But asked has edited his question and added I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height. which is not mentioned in the accepted answer...I just made a completion here. Maybe I should have commented it on the accepted answer?

– Hegwin
Nov 22 '16 at 2:30

1

it's not mentioned explicitly because it's covered already by the simple CSS declaration already. Open up the answer's Snippet in fullscreen and resize your browser window to see; they stay the same size as each other.

– TylerH
Nov 26 '16 at 4:34

1

Even if the accepted answer uses flexbox, this one has a different approach. align-items: stretch is what set me on the path to solving my problem in a very particular situation.

– BenoitLussier
Jun 13 '18 at 0:20

Isn't align-items: stretch; flex's default?

– madav
Sep 17 '18 at 4:57

The accepted answer uses flexbox already.

– TylerH
Nov 18 '16 at 19:38

@TylerH But asked has edited his question and added

I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.

which is not mentioned in the accepted answer...I just made a completion here. Maybe I should have commented it on the accepted answer?

– Hegwin
Nov 22 '16 at 2:30

@TylerH But asked has edited his question and added

I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.

which is not mentioned in the accepted answer...I just made a completion here. Maybe I should have commented it on the accepted answer?

– Hegwin
Nov 22 '16 at 2:30

it's not mentioned explicitly because it's covered already by the simple CSS declaration already. Open up the answer's Snippet in fullscreen and resize your browser window to see; they stay the same size as each other.

– TylerH
Nov 26 '16 at 4:34

Even if the accepted answer uses flexbox, this one has a different approach. align-items: stretch is what set me on the path to solving my problem in a very particular situation.

– BenoitLussier
Jun 13 '18 at 0:20

Isn't align-items: stretch; flex's default?

– madav
Sep 17 '18 at 4:57

add a comment |

If you don't mind one of the divs being a master and dictating the height for both divs there is this:

Fiddle

No matter what, the div on the right will expand or squish&overflow to match the height of the div on the left.

Both divs must be immediate children of a container, and have to specify their widths within it.

Relevant CSS:

.container {

    background-color: gray;

    display: table;

    width: 70%;

    position:relative;

}



.container .left{

    background-color: tomato;

    width: 35%;

}



.container .right{

    position:absolute;

    top:0px;

    left:35%;

    background-color: orange;

    width: 65%;

    height:100%;

    overflow-y: auto;

}

answered May 23 '14 at 6:27

Hashbrown

5,81863958

add a comment |

If you don't mind one of the divs being a master and dictating the height for both divs there is this:

Fiddle

No matter what, the div on the right will expand or squish&overflow to match the height of the div on the left.

Both divs must be immediate children of a container, and have to specify their widths within it.

Relevant CSS:

.container {

    background-color: gray;

    display: table;

    width: 70%;

    position:relative;

}



.container .left{

    background-color: tomato;

    width: 35%;

}



.container .right{

    position:absolute;

    top:0px;

    left:35%;

    background-color: orange;

    width: 65%;

    height:100%;

    overflow-y: auto;

}

answered May 23 '14 at 6:27

Hashbrown

5,81863958

add a comment |

If you don't mind one of the divs being a master and dictating the height for both divs there is this:

Fiddle

No matter what, the div on the right will expand or squish&overflow to match the height of the div on the left.

Both divs must be immediate children of a container, and have to specify their widths within it.

Relevant CSS:

.container {

    background-color: gray;

    display: table;

    width: 70%;

    position:relative;

}



.container .left{

    background-color: tomato;

    width: 35%;

}



.container .right{

    position:absolute;

    top:0px;

    left:35%;

    background-color: orange;

    width: 65%;

    height:100%;

    overflow-y: auto;

}

answered May 23 '14 at 6:27

Hashbrown

5,81863958

If you don't mind one of the divs being a master and dictating the height for both divs there is this:

Fiddle

No matter what, the div on the right will expand or squish&overflow to match the height of the div on the left.

Both divs must be immediate children of a container, and have to specify their widths within it.

Relevant CSS:

.container {

    background-color: gray;

    display: table;

    width: 70%;

    position:relative;

}



.container .left{

    background-color: tomato;

    width: 35%;

}



.container .right{

    position:absolute;

    top:0px;

    left:35%;

    background-color: orange;

    width: 65%;

    height:100%;

    overflow-y: auto;

}

answered May 23 '14 at 6:27

Hashbrown

5,81863958

answered May 23 '14 at 6:27

Hashbrown

5,81863958

answered May 23 '14 at 6:27

Hashbrown

5,81863958

answered May 23 '14 at 6:27

Hashbrown

5,81863958

add a comment |

I like to use pseudo elements to achieve this. You can use it as background of the content and let them fill the space.

With these approach you can set margins between columns, borders, etc.

.wrapper{

  position: relative;

  width: 200px;

}

.wrapper:before,

.wrapper:after{

  content: "";

  display: block;

  height: 100%;

  width: 40%;

  border: 2px solid blue;

  position: absolute;

  top: 0;

}

.wrapper:before{

  left: 0;

  background-color: red;

}

.wrapper:after{

  right: 0;

  background-color: green;

}



.div1, .div2{

  width: 40%;

  display: inline-block;

  position: relative;

  z-index: 1;

}

.div1{

  margin-right: 20%;

}

<div class="wrapper">

  <div class="div1">Content Content Content Content Content Content Content Content Content

  </div><div class="div2">Other</div>

</div>

answered Dec 15 '16 at 10:40

Adrian Menendez

420312

add a comment |

I like to use pseudo elements to achieve this. You can use it as background of the content and let them fill the space.

With these approach you can set margins between columns, borders, etc.

.wrapper{

  position: relative;

  width: 200px;

}

.wrapper:before,

.wrapper:after{

  content: "";

  display: block;

  height: 100%;

  width: 40%;

  border: 2px solid blue;

  position: absolute;

  top: 0;

}

.wrapper:before{

  left: 0;

  background-color: red;

}

.wrapper:after{

  right: 0;

  background-color: green;

}



.div1, .div2{

  width: 40%;

  display: inline-block;

  position: relative;

  z-index: 1;

}

.div1{

  margin-right: 20%;

}

<div class="wrapper">

  <div class="div1">Content Content Content Content Content Content Content Content Content

  </div><div class="div2">Other</div>

</div>

answered Dec 15 '16 at 10:40

Adrian Menendez

420312

add a comment |

I like to use pseudo elements to achieve this. You can use it as background of the content and let them fill the space.

With these approach you can set margins between columns, borders, etc.

.wrapper{

  position: relative;

  width: 200px;

}

.wrapper:before,

.wrapper:after{

  content: "";

  display: block;

  height: 100%;

  width: 40%;

  border: 2px solid blue;

  position: absolute;

  top: 0;

}

.wrapper:before{

  left: 0;

  background-color: red;

}

.wrapper:after{

  right: 0;

  background-color: green;

}



.div1, .div2{

  width: 40%;

  display: inline-block;

  position: relative;

  z-index: 1;

}

.div1{

  margin-right: 20%;

}

<div class="wrapper">

  <div class="div1">Content Content Content Content Content Content Content Content Content

  </div><div class="div2">Other</div>

</div>

answered Dec 15 '16 at 10:40

Adrian Menendez

420312

I like to use pseudo elements to achieve this. You can use it as background of the content and let them fill the space.

With these approach you can set margins between columns, borders, etc.

.wrapper{

  position: relative;

  width: 200px;

}

.wrapper:before,

.wrapper:after{

  content: "";

  display: block;

  height: 100%;

  width: 40%;

  border: 2px solid blue;

  position: absolute;

  top: 0;

}

.wrapper:before{

  left: 0;

  background-color: red;

}

.wrapper:after{

  right: 0;

  background-color: green;

}



.div1, .div2{

  width: 40%;

  display: inline-block;

  position: relative;

  z-index: 1;

}

.div1{

  margin-right: 20%;

}

<div class="wrapper">

  <div class="div1">Content Content Content Content Content Content Content Content Content

  </div><div class="div2">Other</div>

</div>

.wrapper{

  position: relative;

  width: 200px;

}

.wrapper:before,

.wrapper:after{

  content: "";

  display: block;

  height: 100%;

  width: 40%;

  border: 2px solid blue;

  position: absolute;

  top: 0;

}

.wrapper:before{

  left: 0;

  background-color: red;

}

.wrapper:after{

  right: 0;

  background-color: green;

}



.div1, .div2{

  width: 40%;

  display: inline-block;

  position: relative;

  z-index: 1;

}

.div1{

  margin-right: 20%;

}

<div class="wrapper">

  <div class="div1">Content Content Content Content Content Content Content Content Content

  </div><div class="div2">Other</div>

</div>

.wrapper{

  position: relative;

  width: 200px;

}

.wrapper:before,

.wrapper:after{

  content: "";

  display: block;

  height: 100%;

  width: 40%;

  border: 2px solid blue;

  position: absolute;

  top: 0;

}

.wrapper:before{

  left: 0;

  background-color: red;

}

.wrapper:after{

  right: 0;

  background-color: green;

}



.div1, .div2{

  width: 40%;

  display: inline-block;

  position: relative;

  z-index: 1;

}

.div1{

  margin-right: 20%;

}

<div class="wrapper">

  <div class="div1">Content Content Content Content Content Content Content Content Content

  </div><div class="div2">Other</div>

</div>

answered Dec 15 '16 at 10:40

Adrian Menendez

420312

answered Dec 15 '16 at 10:40

Adrian Menendez

420312

answered Dec 15 '16 at 10:40

Adrian Menendez

420312

answered Dec 15 '16 at 10:40

Adrian Menendez

420312

add a comment |

The CSS grid way

.grid-container {

  display: grid;

  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */

  grid-row-gap: 10px; 

  grid-column-gap: 10px;

}



.grid-item {

  background-color: #f8f8f8;

  box-shadow: 0 0 3px #666;

  text-align: center;

}



.grid-item img {

  max-width: 100%;

}

<div class="grid-container">

  <div class="grid-item">1 <br />1.1<br />1.1.1</div>

  <div class="grid-item">2</div>

  <div class="grid-item">3

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    3.1

  </div>

  <div class="grid-item">4</div>

  <div class="grid-item">5 <br />1.1<br />1.1.1</div>

  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />

    6.1</div>

  <div class="grid-item">7</div>

  <div class="grid-item">8</div>

  <div class="grid-item">9 <br />1.1<br />1.1.1</div>

  <div class="grid-item">10</div>

  <div class="grid-item">11

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    11.1

  </div>

  <div class="grid-item">12</div>

</div>

edited Jun 29 '18 at 14:29

answered Jun 29 '18 at 10:03

connexo

21.9k83557

add a comment |

The CSS grid way

.grid-container {

  display: grid;

  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */

  grid-row-gap: 10px; 

  grid-column-gap: 10px;

}



.grid-item {

  background-color: #f8f8f8;

  box-shadow: 0 0 3px #666;

  text-align: center;

}



.grid-item img {

  max-width: 100%;

}

<div class="grid-container">

  <div class="grid-item">1 <br />1.1<br />1.1.1</div>

  <div class="grid-item">2</div>

  <div class="grid-item">3

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    3.1

  </div>

  <div class="grid-item">4</div>

  <div class="grid-item">5 <br />1.1<br />1.1.1</div>

  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />

    6.1</div>

  <div class="grid-item">7</div>

  <div class="grid-item">8</div>

  <div class="grid-item">9 <br />1.1<br />1.1.1</div>

  <div class="grid-item">10</div>

  <div class="grid-item">11

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    11.1

  </div>

  <div class="grid-item">12</div>

</div>

edited Jun 29 '18 at 14:29

answered Jun 29 '18 at 10:03

connexo

21.9k83557

add a comment |

The CSS grid way

.grid-container {

  display: grid;

  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */

  grid-row-gap: 10px; 

  grid-column-gap: 10px;

}



.grid-item {

  background-color: #f8f8f8;

  box-shadow: 0 0 3px #666;

  text-align: center;

}



.grid-item img {

  max-width: 100%;

}

<div class="grid-container">

  <div class="grid-item">1 <br />1.1<br />1.1.1</div>

  <div class="grid-item">2</div>

  <div class="grid-item">3

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    3.1

  </div>

  <div class="grid-item">4</div>

  <div class="grid-item">5 <br />1.1<br />1.1.1</div>

  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />

    6.1</div>

  <div class="grid-item">7</div>

  <div class="grid-item">8</div>

  <div class="grid-item">9 <br />1.1<br />1.1.1</div>

  <div class="grid-item">10</div>

  <div class="grid-item">11

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    11.1

  </div>

  <div class="grid-item">12</div>

</div>

edited Jun 29 '18 at 14:29

answered Jun 29 '18 at 10:03

connexo

21.9k83557

The CSS grid way

.grid-container {

  display: grid;

  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */

  grid-row-gap: 10px; 

  grid-column-gap: 10px;

}



.grid-item {

  background-color: #f8f8f8;

  box-shadow: 0 0 3px #666;

  text-align: center;

}



.grid-item img {

  max-width: 100%;

}

<div class="grid-container">

  <div class="grid-item">1 <br />1.1<br />1.1.1</div>

  <div class="grid-item">2</div>

  <div class="grid-item">3

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    3.1

  </div>

  <div class="grid-item">4</div>

  <div class="grid-item">5 <br />1.1<br />1.1.1</div>

  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />

    6.1</div>

  <div class="grid-item">7</div>

  <div class="grid-item">8</div>

  <div class="grid-item">9 <br />1.1<br />1.1.1</div>

  <div class="grid-item">10</div>

  <div class="grid-item">11

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    11.1

  </div>

  <div class="grid-item">12</div>

</div>

.grid-container {

  display: grid;

  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */

  grid-row-gap: 10px; 

  grid-column-gap: 10px;

}



.grid-item {

  background-color: #f8f8f8;

  box-shadow: 0 0 3px #666;

  text-align: center;

}



.grid-item img {

  max-width: 100%;

}

<div class="grid-container">

  <div class="grid-item">1 <br />1.1<br />1.1.1</div>

  <div class="grid-item">2</div>

  <div class="grid-item">3

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    3.1

  </div>

  <div class="grid-item">4</div>

  <div class="grid-item">5 <br />1.1<br />1.1.1</div>

  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />

    6.1</div>

  <div class="grid-item">7</div>

  <div class="grid-item">8</div>

  <div class="grid-item">9 <br />1.1<br />1.1.1</div>

  <div class="grid-item">10</div>

  <div class="grid-item">11

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    11.1

  </div>

  <div class="grid-item">12</div>

</div>

.grid-container {

  display: grid;

  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */

  grid-row-gap: 10px; 

  grid-column-gap: 10px;

}



.grid-item {

  background-color: #f8f8f8;

  box-shadow: 0 0 3px #666;

  text-align: center;

}



.grid-item img {

  max-width: 100%;

}

<div class="grid-container">

  <div class="grid-item">1 <br />1.1<br />1.1.1</div>

  <div class="grid-item">2</div>

  <div class="grid-item">3

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    3.1

  </div>

  <div class="grid-item">4</div>

  <div class="grid-item">5 <br />1.1<br />1.1.1</div>

  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />

    6.1</div>

  <div class="grid-item">7</div>

  <div class="grid-item">8</div>

  <div class="grid-item">9 <br />1.1<br />1.1.1</div>

  <div class="grid-item">10</div>

  <div class="grid-item">11

    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />

    11.1

  </div>

  <div class="grid-item">12</div>

</div>

edited Jun 29 '18 at 14:29

answered Jun 29 '18 at 10:03

connexo

21.9k83557

edited Jun 29 '18 at 14:29

answered Jun 29 '18 at 10:03

connexo

21.9k83557

answered Jun 29 '18 at 10:03

connexo

21.9k83557

answered Jun 29 '18 at 10:03

connexo

21.9k83557

add a comment |

you can use jQuery to achieve this easily.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {

    var leftHeight = $('.left').height();

    $('.right').css({'height':leftHeight});

});

HTML

   <div class="left">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>

   </div>

   <div class="right">

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

   </div>

You'll need to include jQuery

answered Jun 8 '10 at 14:14

pixeltocode

4,149104568

1

This will not work if both the <div> have dynamic content. The reason I say is if <div class="right"> have more content that the other problem arises.

– Viswalinga Surya S
Jan 17 '13 at 18:10

add a comment |

you can use jQuery to achieve this easily.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {

    var leftHeight = $('.left').height();

    $('.right').css({'height':leftHeight});

});

HTML

   <div class="left">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>

   </div>

   <div class="right">

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

   </div>

You'll need to include jQuery

answered Jun 8 '10 at 14:14

pixeltocode

4,149104568

1

This will not work if both the <div> have dynamic content. The reason I say is if <div class="right"> have more content that the other problem arises.

– Viswalinga Surya S
Jan 17 '13 at 18:10

add a comment |

you can use jQuery to achieve this easily.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {

    var leftHeight = $('.left').height();

    $('.right').css({'height':leftHeight});

});

HTML

   <div class="left">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>

   </div>

   <div class="right">

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

   </div>

You'll need to include jQuery

answered Jun 8 '10 at 14:14

pixeltocode

4,149104568

you can use jQuery to achieve this easily.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {

    var leftHeight = $('.left').height();

    $('.right').css({'height':leftHeight});

});

HTML

   <div class="left">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>

   </div>

   <div class="right">

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

   </div>

You'll need to include jQuery

answered Jun 8 '10 at 14:14

pixeltocode

4,149104568

answered Jun 8 '10 at 14:14

pixeltocode

4,149104568

answered Jun 8 '10 at 14:14

pixeltocode

4,149104568

answered Jun 8 '10 at 14:14

pixeltocode

4,149104568

1

This will not work if both the <div> have dynamic content. The reason I say is if <div class="right"> have more content that the other problem arises.

– Viswalinga Surya S
Jan 17 '13 at 18:10

add a comment |

1

This will not work if both the <div> have dynamic content. The reason I say is if <div class="right"> have more content that the other problem arises.

– Viswalinga Surya S
Jan 17 '13 at 18:10

This will not work if both the <div> have dynamic content. The reason I say is if <div class="right"> have more content that the other problem arises.

– Viswalinga Surya S
Jan 17 '13 at 18:10

add a comment |

I know its been a long time but I share my solution anyway.
This is a jQuery trick.

--- HTML

<div class="custom-column">

    <div class="column-left">

        asd

        asd<br/>

        asd<br/>

    </div>

    <div class="column-right">

        asd

    </div>

</div>



<div class="custom-column">

    <div class="column-left">

        asd

    </div>

    <div class="column-right">

        asd

        asd<br/>

        asd<br/>

    </div>

</div>

---- CSS

<style>

.custom-column { margin-bottom:10px; }

.custom-column:after { clear:both; content:""; display:block; width:100%; }

    .column-left { float:left; width:25%; background:#CCC; }

    .column-right { float:right; width:75%; background:#EEE; }

</style>

--- JQUERY

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $balancer = function() {

        $('.custom-column').each(function(){

            if($('.column-left',this).height()>$('.column-right',this).height()){

                $('.column-right',this).height($('.column-left',this).height())

            } else {

                $('.column-left',this).height($('.column-right',this).height())

            }



        });



    }

    $balancer();

    $(window).load($balancer());

    $(window).resize($balancer());



});

</script>

answered Nov 17 '14 at 13:47

Roy Vincent

251

add a comment |

I know its been a long time but I share my solution anyway.
This is a jQuery trick.

--- HTML

<div class="custom-column">

    <div class="column-left">

        asd

        asd<br/>

        asd<br/>

    </div>

    <div class="column-right">

        asd

    </div>

</div>



<div class="custom-column">

    <div class="column-left">

        asd

    </div>

    <div class="column-right">

        asd

        asd<br/>

        asd<br/>

    </div>

</div>

---- CSS

<style>

.custom-column { margin-bottom:10px; }

.custom-column:after { clear:both; content:""; display:block; width:100%; }

    .column-left { float:left; width:25%; background:#CCC; }

    .column-right { float:right; width:75%; background:#EEE; }

</style>

--- JQUERY

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $balancer = function() {

        $('.custom-column').each(function(){

            if($('.column-left',this).height()>$('.column-right',this).height()){

                $('.column-right',this).height($('.column-left',this).height())

            } else {

                $('.column-left',this).height($('.column-right',this).height())

            }



        });



    }

    $balancer();

    $(window).load($balancer());

    $(window).resize($balancer());



});

</script>

answered Nov 17 '14 at 13:47

Roy Vincent

251

add a comment |

I know its been a long time but I share my solution anyway.
This is a jQuery trick.

--- HTML

<div class="custom-column">

    <div class="column-left">

        asd

        asd<br/>

        asd<br/>

    </div>

    <div class="column-right">

        asd

    </div>

</div>



<div class="custom-column">

    <div class="column-left">

        asd

    </div>

    <div class="column-right">

        asd

        asd<br/>

        asd<br/>

    </div>

</div>

---- CSS

<style>

.custom-column { margin-bottom:10px; }

.custom-column:after { clear:both; content:""; display:block; width:100%; }

    .column-left { float:left; width:25%; background:#CCC; }

    .column-right { float:right; width:75%; background:#EEE; }

</style>

--- JQUERY

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $balancer = function() {

        $('.custom-column').each(function(){

            if($('.column-left',this).height()>$('.column-right',this).height()){

                $('.column-right',this).height($('.column-left',this).height())

            } else {

                $('.column-left',this).height($('.column-right',this).height())

            }



        });



    }

    $balancer();

    $(window).load($balancer());

    $(window).resize($balancer());



});

</script>

answered Nov 17 '14 at 13:47

Roy Vincent

251

I know its been a long time but I share my solution anyway.
This is a jQuery trick.

--- HTML

<div class="custom-column">

    <div class="column-left">

        asd

        asd<br/>

        asd<br/>

    </div>

    <div class="column-right">

        asd

    </div>

</div>



<div class="custom-column">

    <div class="column-left">

        asd

    </div>

    <div class="column-right">

        asd

        asd<br/>

        asd<br/>

    </div>

</div>

---- CSS

<style>

.custom-column { margin-bottom:10px; }

.custom-column:after { clear:both; content:""; display:block; width:100%; }

    .column-left { float:left; width:25%; background:#CCC; }

    .column-right { float:right; width:75%; background:#EEE; }

</style>

--- JQUERY

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $balancer = function() {

        $('.custom-column').each(function(){

            if($('.column-left',this).height()>$('.column-right',this).height()){

                $('.column-right',this).height($('.column-left',this).height())

            } else {

                $('.column-left',this).height($('.column-right',this).height())

            }



        });



    }

    $balancer();

    $(window).load($balancer());

    $(window).resize($balancer());



});

</script>

answered Nov 17 '14 at 13:47

Roy Vincent

251

answered Nov 17 '14 at 13:47

Roy Vincent

251

answered Nov 17 '14 at 13:47

Roy Vincent

251

answered Nov 17 '14 at 13:47

Roy Vincent

251

add a comment |

The Fiddle

HTML

<div class="container">



    <div class="left-column">



    </div>



    <div class="right-column">

        <h1>Hello Kitty!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

    </div>



</div>

CSS

.container {

    float: left;

    width: 100%;

    background-color: black;

    position: relative;

    left: 0;

}



.container:before,

.container:after {

    content: " ";

    display: table;

}



.container:after {

    clear: both;

}



.left-column {

    float: left;

    width: 30%;

    height: 100%;

    position: absolute;

    background: wheat;

}



.right-column {

    float: right;

    width: 70%;

    position: relative;

    padding: 0;

    margin: 0;

    background: rebeccapurple;            

}

answered Mar 30 '16 at 15:18

drjorgepolanco

2,8552629

add a comment |

The Fiddle

HTML

<div class="container">



    <div class="left-column">



    </div>



    <div class="right-column">

        <h1>Hello Kitty!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

    </div>



</div>

CSS

.container {

    float: left;

    width: 100%;

    background-color: black;

    position: relative;

    left: 0;

}



.container:before,

.container:after {

    content: " ";

    display: table;

}



.container:after {

    clear: both;

}



.left-column {

    float: left;

    width: 30%;

    height: 100%;

    position: absolute;

    background: wheat;

}



.right-column {

    float: right;

    width: 70%;

    position: relative;

    padding: 0;

    margin: 0;

    background: rebeccapurple;            

}

answered Mar 30 '16 at 15:18

drjorgepolanco

2,8552629

add a comment |

The Fiddle

HTML

<div class="container">



    <div class="left-column">



    </div>



    <div class="right-column">

        <h1>Hello Kitty!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

    </div>



</div>

CSS

.container {

    float: left;

    width: 100%;

    background-color: black;

    position: relative;

    left: 0;

}



.container:before,

.container:after {

    content: " ";

    display: table;

}



.container:after {

    clear: both;

}



.left-column {

    float: left;

    width: 30%;

    height: 100%;

    position: absolute;

    background: wheat;

}



.right-column {

    float: right;

    width: 70%;

    position: relative;

    padding: 0;

    margin: 0;

    background: rebeccapurple;            

}

answered Mar 30 '16 at 15:18

drjorgepolanco

2,8552629

The Fiddle

HTML

<div class="container">



    <div class="left-column">



    </div>



    <div class="right-column">

        <h1>Hello Kitty!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

    </div>



</div>

CSS

.container {

    float: left;

    width: 100%;

    background-color: black;

    position: relative;

    left: 0;

}



.container:before,

.container:after {

    content: " ";

    display: table;

}



.container:after {

    clear: both;

}



.left-column {

    float: left;

    width: 30%;

    height: 100%;

    position: absolute;

    background: wheat;

}



.right-column {

    float: right;

    width: 70%;

    position: relative;

    padding: 0;

    margin: 0;

    background: rebeccapurple;            

}

answered Mar 30 '16 at 15:18

drjorgepolanco

2,8552629

answered Mar 30 '16 at 15:18

drjorgepolanco

2,8552629

answered Mar 30 '16 at 15:18

drjorgepolanco

2,8552629

answered Mar 30 '16 at 15:18

drjorgepolanco

2,8552629

add a comment |

-1

jQuery.fn.setEqualHeight = function(){



var $elements = , max_height = ;



jQuery(this).css( 'min-height', 0 );



// GROUP ELEMENTS WHICH ARE ON THE SAME ROW

this.each(function(index, el){ 



    var offset_top = jQuery(el).offset().top;

    var el_height = jQuery(el).css('height');



    if( typeof $elements[offset_top] == "undefined" ){

        $elements[offset_top] = jQuery();

        max_height[offset_top] = 0;

    }



    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );



    if( parseInt(el_height) > parseInt(max_height[offset_top]) )

        max_height[offset_top] = el_height;



});



// CHANGE ELEMENTS HEIGHT

for( var offset_top in $elements ){



    if( jQuery($elements[offset_top]).length > 1 )

        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );



}

};

answered Mar 31 '15 at 7:55

Déján Kőŕdić

62288

add a comment |

-1

jQuery.fn.setEqualHeight = function(){



var $elements = , max_height = ;



jQuery(this).css( 'min-height', 0 );



// GROUP ELEMENTS WHICH ARE ON THE SAME ROW

this.each(function(index, el){ 



    var offset_top = jQuery(el).offset().top;

    var el_height = jQuery(el).css('height');



    if( typeof $elements[offset_top] == "undefined" ){

        $elements[offset_top] = jQuery();

        max_height[offset_top] = 0;

    }



    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );



    if( parseInt(el_height) > parseInt(max_height[offset_top]) )

        max_height[offset_top] = el_height;



});



// CHANGE ELEMENTS HEIGHT

for( var offset_top in $elements ){



    if( jQuery($elements[offset_top]).length > 1 )

        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );



}

};

answered Mar 31 '15 at 7:55

Déján Kőŕdić

62288

add a comment |

-1

jQuery.fn.setEqualHeight = function(){



var $elements = , max_height = ;



jQuery(this).css( 'min-height', 0 );



// GROUP ELEMENTS WHICH ARE ON THE SAME ROW

this.each(function(index, el){ 



    var offset_top = jQuery(el).offset().top;

    var el_height = jQuery(el).css('height');



    if( typeof $elements[offset_top] == "undefined" ){

        $elements[offset_top] = jQuery();

        max_height[offset_top] = 0;

    }



    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );



    if( parseInt(el_height) > parseInt(max_height[offset_top]) )

        max_height[offset_top] = el_height;



});



// CHANGE ELEMENTS HEIGHT

for( var offset_top in $elements ){



    if( jQuery($elements[offset_top]).length > 1 )

        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );



}

};

answered Mar 31 '15 at 7:55

Déján Kőŕdić

62288

jQuery.fn.setEqualHeight = function(){



var $elements = , max_height = ;



jQuery(this).css( 'min-height', 0 );



// GROUP ELEMENTS WHICH ARE ON THE SAME ROW

this.each(function(index, el){ 



    var offset_top = jQuery(el).offset().top;

    var el_height = jQuery(el).css('height');



    if( typeof $elements[offset_top] == "undefined" ){

        $elements[offset_top] = jQuery();

        max_height[offset_top] = 0;

    }



    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );



    if( parseInt(el_height) > parseInt(max_height[offset_top]) )

        max_height[offset_top] = el_height;



});



// CHANGE ELEMENTS HEIGHT

for( var offset_top in $elements ){



    if( jQuery($elements[offset_top]).length > 1 )

        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );



}

};

answered Mar 31 '15 at 7:55

Déján Kőŕdić

62288

answered Mar 31 '15 at 7:55

Déján Kőŕdić

62288

answered Mar 31 '15 at 7:55

Déján Kőŕdić

62288

answered Mar 31 '15 at 7:55

Déján Kőŕdić

62288

add a comment |

-2

    var numexcute = 0;

    var interval;

    $(document).bind('click', function () {



        interval = setInterval(function () {

            if (numexcute >= 20) {

                clearInterval(interval);

                numexcute = 0;

            }

            $('#leftpane').css('height', 'auto');

            $('#rightpane').css('height', 'auto');

            if ($('#leftpane').height() < $('#rightpane').height())

                $('#leftpane').height($('#rightpane').height());

            if ($('#leftpane').height() > $('#rightpane').height())



                $('#rightpane').height($('#leftpane').height());

            numexcute++;

        }, 10);



    });

answered Jul 5 '13 at 22:05

tcao

245

1

Please supply any commentary to your answer.

– sgnsajgon
Jul 5 '13 at 22:30

add a comment |

-2

    var numexcute = 0;

    var interval;

    $(document).bind('click', function () {



        interval = setInterval(function () {

            if (numexcute >= 20) {

                clearInterval(interval);

                numexcute = 0;

            }

            $('#leftpane').css('height', 'auto');

            $('#rightpane').css('height', 'auto');

            if ($('#leftpane').height() < $('#rightpane').height())

                $('#leftpane').height($('#rightpane').height());

            if ($('#leftpane').height() > $('#rightpane').height())



                $('#rightpane').height($('#leftpane').height());

            numexcute++;

        }, 10);



    });

answered Jul 5 '13 at 22:05

tcao

245

1

Please supply any commentary to your answer.

– sgnsajgon
Jul 5 '13 at 22:30

add a comment |

-2

    var numexcute = 0;

    var interval;

    $(document).bind('click', function () {



        interval = setInterval(function () {

            if (numexcute >= 20) {

                clearInterval(interval);

                numexcute = 0;

            }

            $('#leftpane').css('height', 'auto');

            $('#rightpane').css('height', 'auto');

            if ($('#leftpane').height() < $('#rightpane').height())

                $('#leftpane').height($('#rightpane').height());

            if ($('#leftpane').height() > $('#rightpane').height())



                $('#rightpane').height($('#leftpane').height());

            numexcute++;

        }, 10);



    });

answered Jul 5 '13 at 22:05

tcao

245

    var numexcute = 0;

    var interval;

    $(document).bind('click', function () {



        interval = setInterval(function () {

            if (numexcute >= 20) {

                clearInterval(interval);

                numexcute = 0;

            }

            $('#leftpane').css('height', 'auto');

            $('#rightpane').css('height', 'auto');

            if ($('#leftpane').height() < $('#rightpane').height())

                $('#leftpane').height($('#rightpane').height());

            if ($('#leftpane').height() > $('#rightpane').height())



                $('#rightpane').height($('#leftpane').height());

            numexcute++;

        }, 10);



    });

answered Jul 5 '13 at 22:05

tcao

245

answered Jul 5 '13 at 22:05

tcao

245

answered Jul 5 '13 at 22:05

tcao

245

answered Jul 5 '13 at 22:05

tcao

245

1

Please supply any commentary to your answer.

– sgnsajgon
Jul 5 '13 at 22:30

add a comment |

1

Please supply any commentary to your answer.

– sgnsajgon
Jul 5 '13 at 22:30

Please supply any commentary to your answer.

– sgnsajgon
Jul 5 '13 at 22:30

add a comment |

-2

I was having the same problem so i created this small function using jquery as jquery is part of every web application nowadays.

function fEqualizeHeight(sSelector) {

    var sObjects = $(sSelector);



    var iCount = sObjects.length;



    var iHeights = ;



    if (iCount > 0) {

        $(sObjects).each(function () {

            var sHeight = $(this).css('height');

            var iHeight = parseInt(sHeight.replace(/px/i,''));

            iHeights.push(iHeight);

        });



        iHeights.sort(function (a, b) {

            return a - b

        });



        var iMaxHeight = iHeights.pop();



        $(sSelector).each(function () {

            $(this).css({

                'height': iMaxHeight + 'px'

            });

        });

    }

}

You can call this function on page ready event

$(document).ready(function(){

   fEqualizeHeight('.columns');

});

I hope this works for you.

answered Nov 21 '13 at 16:18

Master Programmer

41443

...as jquery is being removed from most web applications nowadays. Times are changing...

– connexo
Jun 29 '18 at 14:27

add a comment |

-2

I was having the same problem so i created this small function using jquery as jquery is part of every web application nowadays.

function fEqualizeHeight(sSelector) {

    var sObjects = $(sSelector);



    var iCount = sObjects.length;



    var iHeights = ;



    if (iCount > 0) {

        $(sObjects).each(function () {

            var sHeight = $(this).css('height');

            var iHeight = parseInt(sHeight.replace(/px/i,''));

            iHeights.push(iHeight);

        });



        iHeights.sort(function (a, b) {

            return a - b

        });



        var iMaxHeight = iHeights.pop();



        $(sSelector).each(function () {

            $(this).css({

                'height': iMaxHeight + 'px'

            });

        });

    }

}

You can call this function on page ready event

$(document).ready(function(){

   fEqualizeHeight('.columns');

});

I hope this works for you.

answered Nov 21 '13 at 16:18

Master Programmer

41443

...as jquery is being removed from most web applications nowadays. Times are changing...

– connexo
Jun 29 '18 at 14:27

add a comment |

-2

I was having the same problem so i created this small function using jquery as jquery is part of every web application nowadays.

function fEqualizeHeight(sSelector) {

    var sObjects = $(sSelector);



    var iCount = sObjects.length;



    var iHeights = ;



    if (iCount > 0) {

        $(sObjects).each(function () {

            var sHeight = $(this).css('height');

            var iHeight = parseInt(sHeight.replace(/px/i,''));

            iHeights.push(iHeight);

        });



        iHeights.sort(function (a, b) {

            return a - b

        });



        var iMaxHeight = iHeights.pop();



        $(sSelector).each(function () {

            $(this).css({

                'height': iMaxHeight + 'px'

            });

        });

    }

}

You can call this function on page ready event

$(document).ready(function(){

   fEqualizeHeight('.columns');

});

I hope this works for you.

answered Nov 21 '13 at 16:18

Master Programmer

41443

I was having the same problem so i created this small function using jquery as jquery is part of every web application nowadays.

function fEqualizeHeight(sSelector) {

    var sObjects = $(sSelector);



    var iCount = sObjects.length;



    var iHeights = ;



    if (iCount > 0) {

        $(sObjects).each(function () {

            var sHeight = $(this).css('height');

            var iHeight = parseInt(sHeight.replace(/px/i,''));

            iHeights.push(iHeight);

        });



        iHeights.sort(function (a, b) {

            return a - b

        });



        var iMaxHeight = iHeights.pop();



        $(sSelector).each(function () {

            $(this).css({

                'height': iMaxHeight + 'px'

            });

        });

    }

}

You can call this function on page ready event

$(document).ready(function(){

   fEqualizeHeight('.columns');

});

I hope this works for you.

answered Nov 21 '13 at 16:18

Master Programmer

41443

answered Nov 21 '13 at 16:18

Master Programmer

41443

answered Nov 21 '13 at 16:18

Master Programmer

41443

answered Nov 21 '13 at 16:18

Master Programmer

41443

...as jquery is being removed from most web applications nowadays. Times are changing...

– connexo
Jun 29 '18 at 14:27

add a comment |

...as jquery is being removed from most web applications nowadays. Times are changing...

– connexo
Jun 29 '18 at 14:27

...as jquery is being removed from most web applications nowadays. Times are changing...

– connexo
Jun 29 '18 at 14:27

add a comment |

-3

I recently came across this and didn't really like the solutions so I tried experimenting.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

answered Nov 27 '13 at 3:19

tushar747

43421021

add a comment |

-3

I recently came across this and didn't really like the solutions so I tried experimenting.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

answered Nov 27 '13 at 3:19

tushar747

43421021

add a comment |

-3

I recently came across this and didn't really like the solutions so I tried experimenting.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

answered Nov 27 '13 at 3:19

tushar747

43421021

I recently came across this and didn't really like the solutions so I tried experimenting.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

answered Nov 27 '13 at 3:19

tushar747

43421021

answered Nov 27 '13 at 3:19

tushar747

43421021

answered Nov 27 '13 at 3:19

tushar747

43421021

answered Nov 27 '13 at 3:19

tushar747

43421021

add a comment |

-4

<div>



<div style="border:1px solid #cccccc; float:left; min-height:200px;">



Some content!<br/>

Some content!<br/>

Some content!<br/>

Some content!<br/>

Some content!<br/>



</div>



<div style="border:1px solid #cccccc; float:left; min-height:200px;">



Some content!



</div>



</div>

What I did here is to change the height to min-height and gave it a fixed value. if one of them is getting resized the other one will stay the same height. not sure if this is what you want

answered Jun 8 '10 at 13:53

Wai Wong

90131117

The OP wanted the divs to always have the same height.

– Simon Forsberg
May 14 '12 at 11:16

add a comment |

-4

<div>



<div style="border:1px solid #cccccc; float:left; min-height:200px;">



Some content!<br/>

Some content!<br/>

Some content!<br/>

Some content!<br/>

Some content!<br/>



</div>



<div style="border:1px solid #cccccc; float:left; min-height:200px;">



Some content!



</div>



</div>

What I did here is to change the height to min-height and gave it a fixed value. if one of them is getting resized the other one will stay the same height. not sure if this is what you want

answered Jun 8 '10 at 13:53

Wai Wong

90131117

The OP wanted the divs to always have the same height.

– Simon Forsberg
May 14 '12 at 11:16

add a comment |

-4

<div>



<div style="border:1px solid #cccccc; float:left; min-height:200px;">



Some content!<br/>

Some content!<br/>

Some content!<br/>

Some content!<br/>

Some content!<br/>



</div>



<div style="border:1px solid #cccccc; float:left; min-height:200px;">



Some content!



</div>



</div>

What I did here is to change the height to min-height and gave it a fixed value. if one of them is getting resized the other one will stay the same height. not sure if this is what you want

answered Jun 8 '10 at 13:53

Wai Wong

90131117

<div>



<div style="border:1px solid #cccccc; float:left; min-height:200px;">



Some content!<br/>

Some content!<br/>

Some content!<br/>

Some content!<br/>

Some content!<br/>



</div>



<div style="border:1px solid #cccccc; float:left; min-height:200px;">



Some content!



</div>



</div>

What I did here is to change the height to min-height and gave it a fixed value. if one of them is getting resized the other one will stay the same height. not sure if this is what you want

answered Jun 8 '10 at 13:53

Wai Wong

90131117

answered Jun 8 '10 at 13:53

Wai Wong

90131117

answered Jun 8 '10 at 13:53

Wai Wong

90131117

answered Jun 8 '10 at 13:53

Wai Wong

90131117

The OP wanted the divs to always have the same height.

– Simon Forsberg
May 14 '12 at 11:16

add a comment |

The OP wanted the divs to always have the same height.

– Simon Forsberg
May 14 '12 at 11:16

The OP wanted the divs to always have the same height.

– Simon Forsberg
May 14 '12 at 11:16

add a comment |

protected by Community♦ Dec 19 '14 at 13:54

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk

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

20 Answers
20

Flexbox

Using Javascript

Using CSS

The CSS grid way

protected by Community♦ Dec 19 '14 at 13:54

20 Answers
20

20 Answers
20

Flexbox

Flexbox

Flexbox

Flexbox

Using Javascript

Using CSS

Using Javascript

Using CSS

Using Javascript

Using CSS

Using Javascript

Using CSS

The CSS grid way

The CSS grid way

The CSS grid way

The CSS grid way

protected by Community♦ Dec 19 '14 at 13:54

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas

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

20 Answers 20

Flexbox

Using Javascript

Using CSS

The CSS grid way

protected by Community♦ Dec 19 '14 at 13:54

20 Answers 20

20 Answers 20

Flexbox

Flexbox

Flexbox

Flexbox

Using Javascript

Using CSS

Using Javascript

Using CSS

Using Javascript

Using CSS

Using Javascript

Using CSS

The CSS grid way

The CSS grid way

The CSS grid way

The CSS grid way

protected by Community♦ Dec 19 '14 at 13:54

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas

20 Answers
20

20 Answers
20

20 Answers
20