Div's problem (very important)

Get Started
1

i want to transfer this table to div’s but i tried many times and i can not make it…

so please i need help


<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="159" align="left" valign="top"  style="background-color:#F00">first td</td>
    <td  width="460" class="middle" valign="top" style="background-color:#FF0">second td</td>
    <td width="180" rowspan="2" valign="top" style=" background-color:#ff0000"><p>third td which contains rowspan =2 </p>
    <p>&nbsp;</p>
    <p>to let it finish with the footer</p></td>
  </tr>
  <tr>
    <td  height="60" colspan="2" align="left" valign="top" style="background-color:#C60"><br />
new tr that contains colspan = 2
<br />
&amp;copy 2002 -
    2010
      , All Rights Reserved. </td>
  </tr>
</table>

please help me i need to fix my problem quickly

2

Something like this.

<html>
<head>
<style>
.ztable {
	width: 800px;
}
.zcol3 {
	background-color: #ff0000;
	clear: both;
	float: right;
	text-align: left;
	vertical-align: top;
	width: 180px;
}
.zcol1 {
	background-color: #ff0000;
	clear: left;
	float: left;
	text-align: left;
	vertical-align: top;
	width: 160;
}
.zcol2 {
	background-color: #ffff00;
	float: left;
	vertical-align: top;
	width: 460;
}
.zcol12 {
	background-color: #cc6600;
	clear: left;
	float: left;
	height: 60px;
	vertical-align: top;
	width: 620;
}
</style>
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0">
 <tr>
    <td width="160" align="left" valign="top"  style="background-color:#F00">first td</td>
    <td  width="460" class="middle" valign="top" style="background-color:#FF0">second td</td>
    <td width="180" rowspan="2" valign="top" style=" background-color:#ff0000"><p>third td which contains rowspan =2 </p>
    <p>&nbsp;</p>
    <p>to let it finish with the footer</p></td>
  </tr>
  <tr>
    <td  height="60" colspan="2" align="left" valign="top" style="background-color:#C60"><br />
new tr that contains colspan = 2
<br />
&amp;copy 2002 -
    2010
      , All Rights Reserved. </td>
  </tr>
</table>

<div class="ztable">
<div class="zcol3"><p>third td which contains rowspan =2 </p>
    <p>&nbsp;</p>
    <p>to let it finish with the footer</p></div>
<div class="zcol1">first td</div>
<div class="middle zcol2">second td</div>
<div class="zcol12"><br />
new tr that contains colspan = 2
<br />
&copy; 2002 -
    2010
      , All Rights Reserved. </div>
</div>
</body>
</html>
3

Philip, did you actually try this code before posting it?

4

Yes. Are you experiencing a problem with it?

5

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
</head>
<style>
.mainwrap {
width:800px;
clear:both;
overflow:hidden;
}
.contentWrap {
width:800px;
clear:both;
overflow:hidden;
background:#F00;
}
.leftContent {
width:159px;
float:left;
}
.midContent {
width:460px;
float:left;
background:#FF0;
}
.rightContent {
width:180px;
float:left;
}
.footer {
width:619px;
float:left;
background:#C60;
}
.footer p{
padding:30px 0px 0px 0px;
}
</style>
<body>
<div class=“mainwrap”>
<div class=“contentWrap”>
<div class=“leftContent”>first </div>
<div class=“midContent”>second </div>
<div class=“rightContent”>third </div>
<div class=“footer”><p>&copy 2002 - 2010 , All Rights Reserved.</p></div>
</div>
</div>
</body>
</html>