2 column layout in css without float,position absolute

Question

Anybody any ideas 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

Tables should only be used for tabular information, you should avoid using tables for creating layouts, instead you should use DIV-based layouts. See my answer here for more details about this. Since you have asked for a solution without floats, position (which means divs), the only other option we are left with is tables, so here is how you might go on to creating table based two column layout.

 <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 :)

Answer 2

make use of a list displayed inline, fix margin and padding and it should work well. This will allow you to have more that two columns if you want to expand later.

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

CSS

li
{
display:inline;
}

Don't forget to put enough margin/padding to make it look better.

Answer 3

solution found with css3