2

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 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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
John
  • 898
  • 2
  • 9
  • 25
  • Just a guess, but how does IE 7 treat CSS min-width and min-height? If you add that to the divs, while floating and using clear.. it might actually give you the right results? – Luceos Jun 10 '11 at 11:13
  • 2
    Just use a table. Seriously, why using pliers to make a hole when there is a drill available? Right tool for the right job – Bazzz Jun 10 '11 at 11:23
  • I removed my answer because it doesn't work for your use case anyway. – thirtydot Jun 10 '11 at 11:41
  • @Luceos if i set min-width to #1 and it goes beyond its min-width, it doesn't affect the width of #3 which is what I'm trying to do :) @Bazzz It seems this is one of the few cases people approve of using tables – John Jun 10 '11 at 11:43

2 Answers2

1

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.

Ryan
  • 1,878
  • 1
  • 14
  • 17
  • This is interesting. I wish browsers (especially IE) were quicker when comes to accepting new standards... – John Jun 10 '11 at 11:44
  • @John I am actually impressed by IE9 with improved support and Microsofts new commitment to web standards with including CSS3 support, improving CSS2 support and providing HTML5 support. Hopefully it won't be long until these can be used standardly across all browsers – Ryan Jun 10 '11 at 11:50
  • 3 years forward - and the Grid Layout is still supported only by Internet Explorer. Unbelievable. – MarcinWolny Nov 05 '14 at 10:38
0

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;
 }
ChillaraDonga
  • 73
  • 1
  • 3