hey all, I'm trying to put a page together with divs but my right div doesn't align properly and starts after the left div. I've tried all the 'Clear' options but nothing seems to work.

this is the code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Home Page</title>
<style type="text/css">
<!--
body {
    background-color: #0a1f1f;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}
#headerDiv {
    margin-top: 45px;
    margin-left: 35px;
}
.titleThe {
    font-family: "Century Gothic";
    font-size: 24px;
    font-weight: bold;
    font-smooth: always;
    text-transform: lowercase;
    color: #e65324;
}

#leftDiv {
    clear: none;
    float: left;
    margin-left: 42px;
    margin-top: 60px;
    border: none;
    width: 55%;
}
#rightDiv {
    float: right;
    margin-right: 42px;
    margin-top: 58px;
    width: 40%;
    clear: none;
}
.strpln {
    font-family: "Century Gothic";
    font-size: 18px;
    font-weight: bold;
    color: #666666;
    text-transform: lowercase;
}
#infoDiv {
    border: 1px solid #E65324;
    height: 350px;
    width: 260px;
    font-family: "Century Gothic";
    font-size: 14px;
    color: #FFFFFF;
    margin-left: 6px;
    padding: 3px;
    clear: both;
    float: left;
}
#leftbottomDiv {
    clear: both;
    float: left;
    margin-top: 55px;
}
#rightbottomDiv {
    float: left;
    clear: right;
    margin-top: 57px;
    margin-left: 145px;
}
.msgBox {
    background-color: #0A1F1F;
    border: 1px solid #E65324;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-transform: capitalize;
    color: #FFFFFF;
}
#msgDiv {
}
.contactImg {
    clear: both;
}
-->
</style></head>

<body>
<div id="mainDiv" align="center"><div id="headerDiv" align="left">
  <p><img src="images/title.gif" width="448" height="60"></p>
</div>

  <div id="leftDiv">
    <div align="left" class="strpln">
      <p>a quite and relaxed environment</p>
      <p>where creativity and development are</p>
      <p>the foundations of a productive business</p>
      <div id="leftbottomDiv"><img src="images/portfolio.gif" width="89" height="32"></div>
      <div id="rightbottomDiv"><img src="images/contact.gif" width="94" height="26" class="contactImg">
        <div id="msgDiv"><form name="form1" method="post" action=""><textarea name="msgBox" cols="36" rows="9" wrap="physical" class="msgBox">enter your message</textarea>
        </form></div>
      </div>
    </div>
  </div><div id="rightDiv">
    <div align="left">
      <img src="images/whatwedo.gif" width="142" height="25">
      <div id="infoDiv">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>
can anyone point out where I'm going wrong?
thanks in advance