HTML CSS Making two floating divs the same height

Question

I have a little peculiar problem that I currently solve using a table  see below   Basically  I want to have two divs take up 100  of the available width  but only take up as much vertical space as needed  which isn t really that obvious from the picture    The two should at all times have the exact same height with a little line between them  as shown     source  pici se     This is all very easy to do using table  which I m currently doing  However  I m not too keen on the solution  as semantically this is not actually a table

User · Answer

This works for me in IE 7  FF 3 5  Chrome 3b  Safari 4  Windows    Also works in IE 6 if you uncomment the clearer div at the bottom  Edit  as Natalie Downe said  you can simply add width  100   to  container instead    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN       http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt   lt head gt       lt style type  text css  gt           container               overflow  hidden              border  1px solid black              background-color  red                     left-col               float  left              width  50               background-color  white                     right-col               float  left              width  50               margin-right  -1px     Thank you IE                   lt  style gt   lt  head gt   lt body gt       lt div id  container  gt           lt div id  left-col  gt              Test content lt br   gt              longer          lt  div gt           lt div id  right-col  gt              Test content          lt  div gt           lt  --div style  clear  both   gt  lt  div-- gt       lt  div gt   lt  body gt   lt  html gt    I don t know a CSS way to vertically center the text in the right div if the div isn t of fixed height  If it is  you can set the line-height to the same value as the div height and put an inner div containing your text with display  inline  line-height  110

User · Answer

Several years ago  the float property used to solve that problem with the table approach using display  table  and display  table-row  and display  table-cell    But now with the flex property  you can solve it with 3 lines of code  display  flex  and flex-wrap  wrap  and flex  1 0 50     parent       display  flex      flex-wrap  wrap      child       flex  flex-grow flex-shrink flex-basis      flex  1 0 50       1 0 50  are the flex values we gave to  flex-grow flex-shrink flex-basis respectively  It s a relatively new shortcut in flexbox to avoid typing them individually  I hope this helps someone out there

User · Answer

Considering Natalie s response  it seemed very good  but I had problems with a possible footer area  which could be hacked a little using clear  both  Of course  a better solution would be to use flexbox or grid nowadays  You can check this codepen if you want    x000D   x000D   section     width  500px    margin  auto    overflow  hidden    padding  0     div     padding  1rem      header     background  lightblue      sidebar     background  lightgreen    width  calc 25  - 1rem       sidebar-left     float  left    padding-bottom  500rem    margin-bottom  -500rem      main     background  pink    width  calc 50  - 4rem     float  left    padding-bottom  500rem    margin-bottom  -500rem      sidebar-right     float  right    padding-bottom  500rem    margin-bottom  -500rem      footer     background  black    color  white    float  left    clear  both    margin-top  1rem    width  calc 100  - 2rem     x000D   lt div class  section  gt   lt div class  header  gt    This is the header  lt  div gt   lt div class  sidebar sidebar-left  gt    This sidebar could have a menu or something like that  It may not have the same length as the other  lt  div gt   lt div class  main  gt    This is the main area  It should have the same length as the sidebars  lt  div gt   lt div class  sidebar sidebar-right  gt    This is the other sidebar  it could have some ads  lt  div gt   lt div class  footer  gt    Footer area  lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

This is a classic problem in CSS  There s not really a solution for this   This article from A List Apart is a good read on this problem  It uses a technique called  faux columns   based on having one vertically tiled background image on the element containing the columns that creates the illusion of equal-length columns  Since it is on the floated elements  wrapper  it is as long as the longest element     The A List Apart editors have this note on the article      A note from the editors  While excellent for its time  this article may not reflect modern best practices    The technique requires completely static width designs that doesn t work well with the liquid layouts and responsive design techniques that are popular today for cross-device sites  For static width sites  however  it s a reliable option

User · Answer

It is year 2012 n  so if you no longer care about IE6 7  display table  display table-row and display table-cell work in all modern browsers   http   www 456bereastreet com archive 200405 equal height boxes with css   Update 2016-06-17  If you think time has come for display flex  check out Flexbox Froggy

User · Answer

Using Javascript  you can make the two div tags the same height  The smaller div will adjust to be the same height as the tallest div tag using the code shown below     var rightHeight   document getElementById  right   clientHeight  var leftHeight   document getElementById  left   clientHeight  if  leftHeight  gt  rightHeight    document getElementById  right   style height leftHeight  px     else   document getElementById  left   style height rightHeight  px       With  left  and  right  being the id s of the div tags

User · Answer

you can get this working with js    lt script gt        document  ready function             var height   Math max     left   height        right   height                 left   height height               right   height height            lt  script gt

User · Answer

I needed to do something similar  here is my implementation  To recap the purpose  it is to have 2 elements take up the width of a given parent container  and the height to only be as high as it needs to be  Essentially height equaling max height of largest amount of content  but the other container being flush    html   lt div id  ven  gt   lt section gt some content lt  section gt   lt section gt some content lt  section gt   lt  div gt    css   ven   height  100      ven section   width  50   float  left  height  100

User · Answer

Using JS  use data-same-height  group name  in all the elements you want to have the same height   The example  https   jsfiddle net eoom2b82   The code     document  ready function         var equalize   function              var disableOnMaxWidth   0     767 for bootstrap          var grouped               var elements        data-same-height              elements each function                  var el     this               var id   el attr  data-same-height                 if   grouped id                     grouped id                                   grouped id  push el                          each grouped  function  key                var elements        data-same-height      key                       elements css  height                     var winWidth     window  width                 if  winWidth  lt   disableOnMaxWidth                    return                             var maxHeight   0               elements each function                      var eleq     this                   maxHeight   Math max eleq height    maxHeight                                elements css  height   maxHeight    px                            var timeout   null         window  resize function              if  timeout                clearTimeout timeout               timeout   null                     timeout   setTimeout equalize  250               equalize

User · Answer

By using css property --  display table-cell   x000D   x000D  div   x000D      border  1px solid  000  x000D      margin  5px  x000D      padding  4px  x000D   display table-cell  x000D   width 25   position relative  x000D    x000D  body display table  x000D   border-collapse separate  x000D   border-spacing 5px 5px  x000D   lt div gt  x000D      This is my div one This is my div one This is my div one x000D   lt  div gt  x000D   lt div gt  x000D      This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two x000D   lt  div gt  x000D   lt div gt  x000D      This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 x000D   lt  div gt  x000D   x000D   x000D

User · Answer

As far as I know  you can t do this using current implementations of CSS  To make two column  equal height-ed you need JS

User · Answer

I had similar problem and in my opinion best option is to use just a little bit of javascript or jquery   You can get wanted divs to be same height by getting highest div value and applying that value to all other divs  If you have many divs and many solutions i suggest to write little advance js code to find out which of all divs is the highest and then use it s value   With jquery and 2 divs it s very simple  here is example code       smaller-div   css  height      higher-div   css  height       And for the end  there is 1 last thing  Their padding  top and bottom  must be the same   If one have larger padding you need to eliminate padding difference

User · Answer

You can get equal height columns in CSS by applying bottom padding of a large amount  bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden  Vertically centering the text is a little trickier but this should help you on the way    x000D   x000D   container   x000D    overflow  hidden  x000D        width  100   x000D    x000D   left-col   x000D    float  left  x000D    width  50   x000D    background-color  orange  x000D    padding-bottom  500em  x000D    margin-bottom  -500em  x000D    x000D   right-col   x000D    float  left  x000D    width  50   x000D    margin-right  -1px     Thank you IE    x000D    border-left  1px solid black  x000D    background-color  red  x000D    padding-bottom  500em  x000D    margin-bottom  -500em  x000D    x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN  x000D     http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt  x000D   x000D   lt head gt  lt  head gt  x000D   x000D   lt body gt  x000D     lt div id  container  gt  x000D       lt div id  left-col  gt  x000D         lt p gt Test content lt  p gt  x000D         lt p gt longer lt  p gt  x000D       lt  div gt  x000D       lt div id  right-col  gt  x000D         lt p gt Test content lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    I think it worth mentioning that the previous answer by streetpc has invalid html  the doctype is XHTML and there are single quotes around the attributes  Also worth noting is that you dont need an extra element with clear on in order to clear the internal floats of the container  If you use overflow hidden this clears the floats in all non-IE browsers and then just adding something to give hasLayout such as width or zoom 1 will cause IE to clear its internal floats   I have tested this in all modern browsers FF3  Opera9  Chrome Safari 3  and IE6 7 8  It may seem like an ugly trick but it works well and I use it in production a lot   I hope this helps

User · Answer

You should use flexbox to achieve this  It s not supported in IE8 and IE9 and only with the -ms prefix in IE10  but all other browsers support it  For vendor prefixes  you should also use autoprefixer    parent       display  flex      flex-wrap  wrap     allow wrapping items     child       flex-grow  1      flex-basis  50      50  for two in a row  33  three in a row etc

[html] HTML/CSS: Making two floating divs the same height

Examples related to html

Examples related to css

Examples related to html-table