2 columns in css without float, absolute position

Question

Does anyone know how to achieve this I want this effect

<table> <tr><td width=100></td><td width=100></td></tr> </table> 

I can do it with float or position absolute, but can it be done without these two?

Answer 1

solution found css3 has a solution for it -moz-column-count: 2; -webkit-column-count: 2; but not yet widely supported.

Answer 2

use the list displayed in the line, patch and addition, and it should work well. This will allow you to have more than two columns if you want to expand them later.

 <ul> <li>First column</li> <li>Second Column</li> </ul> 

CSS

 li { display:inline; } 

Remember to add enough margins / indents to make them look better.

Answer 3

 <div style="display:table;"> <div style="display:table-cell;"></div> <div style="display:table-cell;"></div> </div> 

of course except IE

Answer 4

Tables should only be used for tabular information; you should avoid using tables to create layouts; instead, you should use DIV-based layouts. See my answer here for details on this. Since you asked for a solution without float, position (which means divs), the only other option we stayed with is tables, so this is how you can continue to create a table layout based on tables.

  <table width="60%" border="1" align="center"> <tr> <td width="50%" align="left"> <table> <tr> <td>Colume One</td> </tr> </table> </td> <td width="50%" align="left"> <table> <tr> <td>Colume Two</td> </tr> </table> </td> </tr> </table> 

Again, using tables for layouts is not a good idea :)