How to get two divs the same height depending on which one has the bigger height in CSS [duplicate]


Tags: css,html

Problem :

This question already has an answer here:

I have a two divs inside a container div, and I want the img_box div to match the height of the content_con div depending on how much height it has. So let it stay if the content_con div has three paragraphs and that gives content_con a height of 303 pixels; I want the img_box div to match that height. Make sense? How do I do that in CSS?

In short, img_box and content_con match the height depending on which one has the bigger height. See below to see a vis:

<div class="box_container">
  <div class="img_box"></div>
  <div class="content_con"><div>
</div>


.box_container
----------------------------------------------
             |
   .img_box  |  .content_con
             |
----------------------------------------------


Solution :

You can do like this by the following method, no matter how much data comes in the div. But the height will be equal for both divs.

.box_container{display:table;width:100% }
.img_box, .content_con{display:table-cell; vertical-align:top; width:50%}
.img_box{background:red;}
.content_con{background:yellow;}

Here is a demo to see how it looks:

http://jsbin.com/hidicoma/1/


    CSS Howto..

    Flex - understanding how to properly reference an image in a library project css file

    HTML/CSS: how to position forms? [closed]

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]

    How can I use True Type Collection (.ttc) in JavaFX?

    How to add css files to a custom module in Odoo 8?

    CSS: how to style a div so that it has no effect

    How do check the Css properties for an element when pressed in Google Chrome Developer Tools

    How to dynamically alter the CSS of a pseudo element with JQuery?

    How to make a main div appear next to a sidebar

    How to get content below background-image with z-index of -1?

    How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width

    How to implement this kind of blur effect?

    how to center anchor tag horizontally css

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    How to position a div so that it always appear 100px from top of the visible display

    How could I join a smaller and a bigger div with rounded edges?

    How can I add a hover event to multiple paths in a SVG? And have it work in IE9?

    Should be easy jQuery loop, but can't seem to figure out how to cycle through this

    HTML5 Modal Dialog is showing shortly on page load, how can i stop this?

    How to pivot image with CSS and Javascript

    How to let Fancybox Next and Previous button stay visible

    how do i get css source file path from firebug?

    Hide a partially shown div

    How to make html list scrollable downwards on fullscreen page?

    how to place the images exactly in menu position

    How to adjust a div to not move when other sibling is faded out

    how to make css curve box with gradient & shadow

    How to convert UPPERCASE text to Title Case using CSS

    How to create a multiple-row section with auto-sized columns

    How to apply css in react component when using ES6?