How would you this, WITHOUT tables?

tiles

This layout can be done quite simply with 2 HTML tables, one nested inside the other, or even with a single table. However, can it be done only with CSS??? Here is a solution I found, it’s pretty cool check it out.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>The Challenge</title>
<style type="text/css">
div     {
    text-align: center;
    width: 175px;
    height: 175px;
    line-height: 35px;
}

div div {
    float:left;
    width: 35px;
    height: 35px;
}

#orange, #maroon,
#blue  , #green  {
    float:right;
}

#orange, #silver {
    background-color: silver;
    width: 140px;
}

#navy  , #maroon {
    background-color:maroon;
    height:140px;
    line-height:140px;
}

         #navy   {
            background-color:navy ;
         }

#green , #red    {
    background-color:red;
    width: 70px;
}

#yellow, #blue   {
    background-color:blue;
    height: 70px;
    line-height: 70px;
}

         #yellow {
             background-color:yellow;
         }

         #white  {
             background-color:white ;
         }

         #green  {
             background-color:green ;
         }

         #orange {
             background-color:orange;
         }
</style>
</head>
<body>
  <div>
    <div id="silver">1</div>
    <div id="maroon">2</div>
    <div id="navy">3</div>
    <div id="red">4</div>
    <div id="blue">5</div>
    <div id="yellow">6</div>
    <div id="white" >7</div>
    <div id="green" >8</div>
    <div id="orange">9</div>
  </div>
</body>
</html>

via jsbin