How might I force a floating DIV to match the height of another floating DIV

Question

My HTML code is just dividing the pages into two columns  65  35  respectively    lt div style  float   left  width  65   height auto background-color  FDD017   gt      lt div id  response  gt      lt  div gt    lt  div gt   lt div style  float   left  width  35  height auto  background-color  FDD017   gt      lt div id  note  gt      lt  div gt   lt  div gt     In the response div  I have variable data  in the note div  I have fixed data   Even though the two divs have two different sets of data  I need them to display with the same height so that the background colors appear to fill a box containing both  Naturally  the problem is the response div  as its height varies depending on the amount of data currently being displayed within it   How might I ensure that the height of the two columns are always equal

User · Answer

Here is a jQuery plugin to set the heights of multiple divs to be the same  And below is the actual code of the plugin     fn equalHeights   function px      this  each function    var currentTallest   0    this  children   each function i       if    this  height    gt  currentTallest    currentTallest     this  height                      if   px     Number prototype pxToEm  currentTallest   currentTallest pxToEm      use ems unless px is specified            for ie6  set height since min-height isn t supported     if    browser msie  amp  amp    browser version    6 0      this  children   css   height   currentTallest                this  children   css   min-height   currentTallest                 return this

User · Answer

This code will let you have a variable number of rows  with a variable number of DIVs on each row  and it will make all of the DIVs on each row match the height of its tallest neighbour   If we assumed all the DIVs  that are floating  are inside a container with the id  divContainer   then you could use the following     document  ready function      var currentTallest   0  var currentRowStart   0  var rowDivs   new Array        div divContainer div   each function index         if currentRowStart      this  position   top                we just came to a new row   Set all the heights on the completed row         for currentDiv   0   currentDiv  lt  rowDivs length   currentDiv    rowDivs currentDiv  height currentTallest               set the variables for the new row         rowDivs length   0     empty the array         currentRowStart     this  position   top          currentTallest     this  height            rowDivs push   this           else               another div on the current row   Add it to the list and check if it s taller         rowDivs push   this            currentTallest    currentTallest  lt    this  height         this  height       currentTallest                 do the last row     for currentDiv   0   currentDiv  lt  rowDivs length   currentDiv    rowDivs currentDiv  height currentTallest

User · Answer

Wrap them in a containing div with the background color applied to it  and have a clearing div after the  columns     lt div style  background-color  yellow   gt     lt div style  float  left width  65    gt column a lt  div gt     lt div style  float  right width  35    gt column b lt  div gt     lt div style  clear  both   gt  lt  div gt   lt  div gt      Updated to address some comments and my own thoughts   This method works because its essentially a simplification of your problem  in this somewhat  oldskool  method I put two columns in followed by an empty clearing element  the job of the clearing element is to tell the parent  with the background  this is where floating behaviour ends  this allows the parent to essentially render 0 pixels of height at the position of the clear  which will be whatever the highest priorly floating element is   The reason for this is to ensure the parent element is as tall as the tallest column  the background is then set on the parent to give the appearance that both columns have the same height   It should be noted that this technique is  oldskool  because the better choice is to trigger this height calculation behaviour with something like clearfix or by simply having overflow  hidden on the parent element   Whilst this works in this limited scenario  if you wish for each column to look visually different  or have a gap between them  then setting a background on the parent element won t work  there is however a trick to get this effect   The trick is to add bottom padding to all columns  to the max amount of size you expect that could be the difference between the shortest and tallest column  if you can t work this out then pick a large figure  you then need to add a negative bottom margin of the same number   You ll need overflow hidden on the parent object  but the result will be that each column will request to render this additional height suggested by the margin  but not actually request layout of that size  because the negative margin counters the calculation     This will render the parent at the size of the tallest column  whilst allowing all the columns to render at their height   the size of bottom padding used  if this height is larger than the parent then the rest will simply clip off    lt div style  overflow  hidden   gt     lt div style  background  blue float  left width  65  padding-bottom  500px margin-bottom  -500px   gt column a lt br   gt column a lt  div gt     lt div style  background  red float  right width  35  padding-bottom  500px margin-bottom  -500px   gt column b lt  div gt   lt  div gt    You can see an example of this technique on the bowers and wilkins website  see the four horizontal spotlight images the bottom of the page

User · Answer

Having had the same sort of problem as well  requiring three divs next to each other with different content  with right-borders to  seperate  them  the only solution that worked was a slightly modified version of the jQuery option in another answer  Remember you also need the script found here   Below is my slightly modified version of the script  which just allows for a true min-height setting  as I needed my boxes to be at least a certain height      --------------------------------------------------------------------    JQuery Plugin   EqualHeights     by     Scott Jehl  Todd Parker  Maggie Costello Wachs  http   www filamentgroup com        Copyright  c  2008 Filament Group    Licensed under GPL  http   www opensource org licenses gpl-license php        Description    Compares the heights or widths of the top-level children of a provided element                   and sets their min-height to the tallest height  or width to widest width   Sets in em units                   by default if pxToEm   method is available     Dependencies  jQuery library  pxToEm method     article                    http   www filamentgroup com lab retaining scalable interfaces with pixel to em conversion      Usage Example    element  equalHeights                      Optional  to set min-height in px  pass a true argument    element  equalHeights true                     Optional  to specify an actual min-height  in px   pass an integer value  regardless of previous parameter    element  equalHeights false 150      Version  2 0  08 01 2008 --------------------------------------------------------------------      fn equalHeights   function px minheightval          this  each function            if  minheightval    undefined                 var currentTallest   minheightval                         else                var currentTallest   0                      this  children   each function i               if    this  height    gt  currentTallest                     currentTallest     this  height                                      if   px     Number prototype pxToEm               currentTallest   currentTallest pxToEm      Use ems unless px is specified             For Internet Explorer 6  set height since min-height isn t supported          if    browser msie  amp  amp    browser version    6 0                   this  children   css   height   currentTallest                        this  children   css   min-height   currentTallest                return this       It works like a charm and doesn t slow anything down

User · Answer

I recommend you wrap them both in an outer div with the desired background color

User · Answer

Flex does this by default    lt div id  flex  gt    lt div id  response  gt    lt  div gt     lt div id  note  gt    lt  div gt   lt  div gt       CSS     flex display flex   response width 65    note width 35     https   jsfiddle net 784pnojq 1   BONUS  multiple rows  https   jsfiddle net 784pnojq 2

User · Answer

The correct solution for this problem is to use display  table-cell  Important  This solution doesn t need float since table-cell already turns the div into an element that lines up with the others in the same container  That also means you don t have to worry about clearing floats  overflow  background shining through and all the other nasty surprises that the float hack brings along to the party   CSS    container     display  table     column     display  table-cell    width  100px      HTML    lt div class  container  gt       lt div class  column  gt Column 1  lt  div gt       lt div class  column  gt Column 2 is a bit longer  lt  div gt       lt div class  column  gt Column 3 is longer with lots of text in it  lt  div gt   lt  div gt    Related    jsfiddle Using CSS    display  table-cell    for columns

User · Answer

If you are trying to force a floating div to match another to create a column effect  this is what I do  I like it because it s simple and clean    lt div style  background-color   CCC  width 300px  overflow hidden    gt       lt  -- Padding-Bottom is equal to 100  of the container s size  Margin-bottom hides everything beyond          the container equal to the container size  This allows the column to grow with the largest          column  -- gt       lt div style  float  left width  100px  background yellow  padding-bottom 100   margin-bottom -100    gt column a lt  div gt       lt div style  float  left width  100px   background  09F   gt column b lt br   gt Line 2 lt br   gt Line 3 lt br   gt Line 4 lt br   gt Line 5 lt  div gt       lt div style  float left  width 100px  background  yellow  padding-bottom 100   margin-bottom -100    gt Column C lt  div gt       lt div style  clear  both   gt  lt  div gt   lt  div gt    I think this makes sense  It seems to work well even with dynamic content

User · Answer

You can always use a background image to do it too  I tend to vote for this option 100  of the time as the only other perfect solution is the Jquery option   As with using the outer div with a background color you ll end up having to have the content in both divs reaching the same height

User · Answer

I can t understand why this issue gets pounded into the ground when in 30 seconds you can code a two-column table and solve the problem   This div column height problem comes up all over a typical layout  Why resort to scripting when a plain old basic HTML tag will do it  Unless there are huge and numerous tables on a layout  I don t buy the argument that tables are significantly slower

User · Answer

You should wrap them in a div with no float    lt div style  float none background  FDD017   class  clearfix  gt       lt div id  response  style  float left  width 65    gt Response with two lines lt  div gt       lt div id  note  style  float left  width 35    gt single line note lt  div gt   lt  div gt    I also use the clearfix patch on here http   www webtoolkit info css-clearfix html

[html] How might I force a floating DIV to match the height of another floating DIV?

Examples related to html

Examples related to css

Examples related to height