Making DIVs behave like tables

Is it possible to make e.g. a 2x2 grid with divs that behaves like a table when comes to resizing to fit the contents?

Like this

+-----------+
|  1  |  2  |
-------------
|  3  |  4  |
+-----------+

So for example if you write something in cell #1 and the width increases to fit the content, cell #3 is resized to so it has the same width as #1. And开发者_JAVA技巧 Same for height so if you put linebreaks in #1 and height increases, #2 gets the same height too.

I know it can be done with display: table,table-row,table-cell but IE7 doesn't support them. Is there any workarounds (without JS) or a different solution?

Apart from putting a table inside a div itself, or 4 other divs inside the div, there is a CSS3 Grid Column property but it isn't currently supported by any of the major browsers, you can see the information here

The only other alternative I know (that I use in 1 site) is supported in all browsers except for IE, the CSS3 Multiple Columns property. I nest 2 divs inside a container div, 1 top and 1 down then use this property.

I hope it helps.

You can always use css classes display : table, display : table-row ,display : table-cell to make div act like table

.tableClass{
  display : table;
 }
.row{
 display : table-row;
 }
.cell{
  dispaly : table-cell;
 }