Tableless CSS

To create table with CSS, the trick is to use the “float” tag. We first create two div. One div is the left part, the other div is the right div. For the left div use float:left; and for the right div use float:right;
In the left div, you can add two div. One is above the othe box.

Try the following code.

<style type="text/css">
<!--
body,td,th {
 font-family: Tahoma;
 font-size: 12px;
 color: 1B1C1D;
}

#top
{
  height: 100px;
  width: 100px;
    background-color: #ff0000;
}
#bottom
{
  height: 100px;
  width: 100px;
  background-color: #ff00ff;
}

#left
{
float:left;
}
#right
{
float:right;
  height: 210px;
  width: 100px;
  background-color: #ffff00;
}
#container
{
  height: 200px;
  width: 200px;
}
-->
</style>
<div id=container>
 <div id=left>
  <div id=top>top</div>
  <div id=bottom>bottom</div>
 </div>
 <div id=right>right
 </div>
</div>

 

Jul 4, 2008 by
GreenGeeks WP Web Host ad ad ad ad