Question

Possible Duplicate:
how to create a table layout with float in css

I want to create 3 by 3 matrix using float property of css.The colums must be of equal heifht and width and be cross browser compactible.I want the height of colums must be the height of largest column in a row

CSS

   div.outer
 {
   width:700px;
   float:left;
   position:relative;
   overflow:hidden;
  }


div.inner
{
   width:700px;
  float:left;
  position:relative;

}


div.content
{  width:700px;
   float:left;
   position:relative;

}
span.std
{
  width:500px;
  float:left;
  position:relative;
}
span.std span.std-content
{
   float:left;
   width:250px;
   position:relative;


 }

Code

<div class="inner">
    <div class="content">
    <span class="std">
    <span class="std-content">
       Column 1 Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1</p>

    </span>
    <span class="std-content">
          Column 2


    </span>
    </span>

    </div>
</div>

</div>

Answer 1

This will work in all browsers.

Demo: http://jsfiddle.net/ThinkingStiff/K9bjX/

Output

HTML

<div id="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
<div>​

CSS

#grid {
    width: 300px;
    height: 300px;        
}

.cell {
    outline: 1px solid red;
    float: left;
    height: 100px;
    width: 100px;    
}