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

Question

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    x000D   x000D   lt div style  overflow  hidden  gt  x000D       lt div style  border 1px solid  cccccc  float left  padding-bottom 1000px  margin-bottom -1000px  gt  x000D          Some content  lt br  gt  x000D          Some content  lt br  gt  x000D          Some content  lt br  gt  x000D          Some content  lt br  gt  x000D          Some content  lt br  gt  x000D       lt  div gt  x000D       lt div style  border 1px solid  cccccc  float left  padding-bottom 1000px  margin-bottom -1000px  gt  x000D          Some content  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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.

User · Answer

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

User · Answer

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    lt  DOCTYPE html gt   lt html gt     lt head gt       lt style gt         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               lt  style gt     lt  head gt     lt body gt       lt div id  container  gt         lt div id  left-column  gt           lt ul gt             lt li gt Foo lt  li gt             lt li gt Bar lt  li gt             lt li gt Baz lt  li gt           lt  ul gt         lt  div gt         lt div id  right-column  gt          Lorem ipsum        lt  div gt       lt  div gt     lt  body gt   lt  html gt

User · Answer

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

User · Answer

Using CSS Flexbox and min-height worked for me  Say you have a container with two divs inside and you want those two divs to have the same height  You would set  display  flex  on the container as well as  align-items  stretch  Then just give the child divs a  min-height  of 100  See the code below  x000D   x000D   container     width  100     background  linear-gradient red blue     padding  1em       important      display  flex       important      align-items  stretch    justify-content  space-around      child     width  100     background  white    color  grey    margin  0  5em    padding   5em       important      min-height  100     x000D   lt div class  container  gt        lt div class  child  gt  lt p gt This is some text to fill the paragraph lt  p gt  lt  div gt     lt div class  child  gt  lt p gt This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them  If you remove text from this div  it will shrink and so will the other div  lt  p gt  lt  div gt      lt  div gt  x000D   x000D   x000D

User · Answer

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    x000D   x000D   container   x000D      overflow  hidden  x000D    x000D   column   x000D      float  left  x000D      margin  20px  x000D      background-color  grey  x000D      padding-bottom  100   x000D      margin-bottom  -100   x000D    x000D   lt div class  container  gt  x000D   x000D       lt div class  column  gt  x000D          Some content  lt br gt  x000D          Some content  lt br gt  x000D          Some content  lt br gt  x000D          Some content  lt br gt  x000D          Some content  lt br gt  x000D       lt  div gt  x000D   x000D       lt div class  column  gt  x000D          Something x000D       lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The Fiddle  HTML   lt div class  container  gt        lt div class  left-column  gt        lt  div gt        lt div class  right-column  gt           lt h1 gt Hello Kitty  lt  h1 gt           lt p gt 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  lt  p gt           lt p gt 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  lt  p gt       lt  div gt    lt  div gt    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

User · Answer

Using jQuery  Using jQuery  you can do it in a super simple one-line-script      HTML  lt div id  columnOne  gt   lt  div gt    lt div id  columnTwo  gt   lt  div gt      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

User · Answer

I recently came across this and didn t really like the solutions so I tried experimenting    mydivclass  inline-block  vertical-align  middle  width  33

User · Answer

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   gt  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  gt  1           jQuery  elements offset top   css   min-height   max height offset top

User · Answer

I know its been a long time but I share my solution anyway  This is a jQuery trick   --- HTML    lt div class  custom-column  gt       lt div class  column-left  gt          asd         asd lt br  gt          asd lt br  gt       lt  div gt       lt div class  column-right  gt          asd      lt  div gt   lt  div gt    lt div class  custom-column  gt       lt div class  column-left  gt          asd      lt  div gt       lt div class  column-right  gt          asd         asd lt br  gt          asd lt br  gt       lt  div gt   lt  div gt    ---- CSS   lt style gt   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     lt  style gt    --- JQUERY   lt script src  js jquery min js  gt  lt  script gt   lt script gt    document  ready function         balancer   function                 custom-column   each function                if     column-left  this  height   gt     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           lt  script gt

User · Answer

The CSS grid way  The modern way of doing this  which also avoids having to declare a  lt div class  row  gt  lt  div gt -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    x000D   x000D   grid-container   x000D    display  grid  x000D    grid-template-columns  repeat 2  1fr      or simply  1fr 1fr      x000D    grid-row-gap  10px   x000D    grid-column-gap  10px  x000D    x000D   x000D   grid-item   x000D    background-color   f8f8f8  x000D    box-shadow  0 0 3px  666  x000D    text-align  center  x000D    x000D   x000D   grid-item img   x000D    max-width  100   x000D    x000D   lt div class  grid-container  gt  x000D     lt div class  grid-item  gt 1  lt br   gt 1 1 lt br   gt 1 1 1 lt  div gt  x000D     lt div class  grid-item  gt 2 lt  div gt  x000D     lt div class  grid-item  gt 3 x000D       lt img src  https   lorempixel com 420 320 abstract 1 Sample  alt      gt  x000D      3 1 x000D     lt  div gt  x000D     lt div class  grid-item  gt 4 lt  div gt  x000D     lt div class  grid-item  gt 5  lt br   gt 1 1 lt br   gt 1 1 1 lt  div gt  x000D     lt div class  grid-item  gt 6 lt img src  https   lorempixel com 400 300 abstract   alt      gt  x000D      6 1 lt  div gt  x000D     lt div class  grid-item  gt 7 lt  div gt  x000D     lt div class  grid-item  gt 8 lt  div gt  x000D     lt div class  grid-item  gt 9  lt br   gt 1 1 lt br   gt 1 1 1 lt  div gt  x000D     lt div class  grid-item  gt 10 lt  div gt  x000D     lt div class  grid-item  gt 11 x000D       lt img src  https   lorempixel com 420 320 abstract 1 Sample  alt      gt  x000D      11 1 x000D     lt  div gt  x000D     lt div class  grid-item  gt 12 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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    x000D   x000D   wrapper  x000D    position  relative  x000D    width  200px  x000D    x000D   wrapper before  x000D   wrapper after  x000D    content      x000D    display  block  x000D    height  100   x000D    width  40   x000D    border  2px solid blue  x000D    position  absolute  x000D    top  0  x000D    x000D   wrapper before  x000D    left  0  x000D    background-color  red  x000D    x000D   wrapper after  x000D    right  0  x000D    background-color  green  x000D    x000D   x000D   div1   div2  x000D    width  40   x000D    display  inline-block  x000D    position  relative  x000D    z-index  1  x000D    x000D   div1  x000D    margin-right  20   x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  div1  gt Content Content Content Content Content Content Content Content Content x000D     lt  div gt  lt div class  div2  gt Other lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

lt div gt    lt div style  border 1px solid  cccccc  float left  min-height 200px   gt   Some content  lt br  gt  Some content  lt br  gt  Some content  lt br  gt  Some content  lt br  gt  Some content  lt br  gt    lt  div gt    lt div style  border 1px solid  cccccc  float left  min-height 200px   gt   Some content    lt  div gt    lt  div gt    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

User · Answer

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

User · Answer

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  lt div gt   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

User · Answer

var numexcute   0      var interval        document  bind  click   function               interval   setInterval function                  if  numexcute  gt   20                    clearInterval interval                   numexcute   0                                leftpane   css  height    auto                    rightpane   css  height    auto                if      leftpane   height    lt      rightpane   height                        leftpane   height     rightpane   height                 if      leftpane   height    gt      rightpane   height                         rightpane   height     leftpane   height                 numexcute               10

User · Answer

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      lt div class  left  gt       lt p gt 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  lt  p gt      lt  div gt      lt div class  right  gt       lt p gt Lorem ipsum dolor sit amet  lt  p gt      lt  div gt    You ll need to include jQuery

User · Answer

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   lt div class  lhs content  gt       lt div class  inner  gt          Content in here      lt  div gt   lt  div gt   lt div class  rhs content  gt       lt div class  inner  gt          More content in here      lt  div gt   lt  div gt

User · Answer

I just wanted to add to the great Flexbox solution described by Pavlo  that  in my case  I had two lists columns of data that I wanted to display side-by-side with just a little spacing between  horizontally-centered inside an enclosing div   By nesting another div within the first  leftmost  flex 1 div and floating it right  I got just what I wanted   I couldn t find any other way to do this with consistent success at all viewport widths   lt div style  quot display flex quot  gt       lt div style  quot flex 1 padding-right 15px quot  gt           lt div style  quot float right quot  gt               My Left-hand list of stuff           lt  div gt       lt  div gt        lt div style  quot flex 1 padding-left 15px quot  gt               My Right-hand list of stuff       lt  div gt   lt  div gt

User · Answer

I have tried almost all the mentioned methods above  but the flexbox solution won t work correctly with Safari  and the grid layout methods won t work correctly with older versions of IE   This solution fits all screens and is cross-browser compatible    container  margin 15px auto    container ul  margin 0 10px    container li  width 30   display  table-cell  background-color  f6f7f7 box-shadow  0 2px 5px 0 rgba 0  0  0  0 25      media  max-width  767px        container li   display  inline-block  width 100   min-height auto important       The above method will equal cells height  and for the smaller screens like mobile or tablet  we can use the  media method mentioned above

User · Answer

Flexbox With flexbox it s a single declaration   x000D   x000D   row     display  flex     equal height of the children        col     flex  1     additionally  equal width         padding  1em    border  solid    x000D   lt div class  row  gt     lt div class  col  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  lt  div gt     lt div class  col  gt 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  lt  div gt   lt  div gt  x000D   x000D   x000D   Prefixes may be required for older browsers  see browser support

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

Examples related to html

Examples related to css

Examples related to html-table

Examples related to flexbox