3

How can I put the height of side by side DIVs?

When I change the width of browser, sometimes the left div get higher or shorter than the left.

I want that automatically the left or the right div grows up to became with the same height of the other one.

Setting a display table-row is the best solution for this?

Take a look at the image of the page I want to develop. https://i.stack.imgur.com/X7aty.png

I solved the problem using display=table-row, table and table-cell. I've added one div to be the table. Now it is perfect! Take a look.

http://jsfiddle.net/tcWCC/47/

Ronaldo
  • 357
  • 2
  • 8
  • 21
  • 1
    Do you need it to be floating? Then please look existing question http://stackoverflow.com/questions/873781/how-to-make-floating-inner-divs-the-same-height-as-the-highest-div . Otherwise, look for example at http://stackoverflow.com/questions/5146665/making-two-column-divs-equal-height/5146935 – FelipeAls May 09 '12 at 14:13
  • 1
    possible duplicate of [How do I keep two divs that are side by side the same height?](http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) – Surreal Dreams May 09 '12 at 14:40
  • It's different. It's like a table. But each row must have a space between them. And each cell also must have a space. Like in the picture http://i.imgur.com/BhvV2.png – Ronaldo May 09 '12 at 16:35

4 Answers4

4

Here's a solution, also found on SO

http://jsfiddle.net/kaAjW/

Here is the link to original post

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

The technique is called Faux Columns and here is an article about it

http://www.alistapart.com/articles/fauxcolumns/

Community
  • 1
  • 1
Grigor
  • 4,139
  • 10
  • 41
  • 79
  • I can't use this because I have the radius-border. the bottom borders are curved. – Ronaldo May 09 '12 at 14:59
  • If you have a sugestion I can. But the columns height should be equal even after resizing of window. I want to build a liquid layout that works in table, mobile phones and desktop. I want somethink like a table row. but each row can't be collapsed in the above or bellow row. – Ronaldo May 09 '12 at 16:43
  • Well, than you can use the plugin called `.equalHeights();` Here is the link to the plugin: http://www.cssnewbie.com/equalheights-jquery-plugin/ – Grigor May 09 '12 at 17:13
3

I solved the problem using display=table-row, table and table-cell. I've added one div to be the table. Now it is perfect! Take a look.

http://jsfiddle.net/tcWCC/47/

Ronaldo
  • 357
  • 2
  • 8
  • 21
  • This is a great solution, simple and no hacks. Just wanted to post this [link](http://demo.hongkiat.com/css-equal-height/) where it explains this in more detail and actually explains 2 alternative CSS methods (including faux column method suggested by @Grigor). – Pancho Jun 13 '14 at 23:13
0

If what you are trying yo do is to place the content in a grey box with rounded conrners then your divs don't need to be of the same height. Just move the background-color and border-radius to the enclosing div: http://jsfiddle.net/tcWCC/41/

-4

I think you won't be able to do that without using a html table.

Olivier G
  • 125
  • 6