CSS, margin ukazuje jinak

Nazdar pomocníci,

potřebuji docílit, aby se text "Lorem ipsum dolor it met." dostal do bílého obdélníku(aby byl text 20px od horního rohu a od levé strany).
Mohl bych to udělat pomocí padding, ale to IE s tím dělá bugy a proto používat tuto metodu. Když dám tomu divu s textem margin:20px 20px;, tak to udlá margin nadřazenému prvku (rozšíří to zelené místo bílého) než chci.

Foto:
60vee69av

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">          
  <title>Webík</title>                                                 
  <link rel="stylesheet" type="text/css" href="styles/main.css" media="screen">
  </head>
  <body>
    <div id="obalovac">
      <div id="hlavicka">
      
      </div>
      <div id="nav">
      
      </div>
      <div id="plovouci">
        <div id="levo">
          <div class="clanek">
            <div class="txt">
            Lorem ipsum dolor it met.
            </div>
          </div>
          <div class="clanek">
          
          </div>
        </div>
        <div id="pravo">
        
        </div>
      </div>
    </div>
  </body>
</html>

CSS:

* {margin:0px; padding:0px;} 

body {
  margin:0px auto;
  background-color:rgb(214,214,214);
  text-align:center;
}
#obalovac {
  width:1000px;
  margin:0px auto;
  text-align:left;
}
#hlavicka {
  background-color:rgb(153,51,51);
  width:1000px;
  height:100px;
}
#plovouci {
  margin:30px 0px 0px 0px;
  width:1000px;
}
#levo {
  background-color:rgb(102,153,102);
  margin:0px 10px 0px 0px;
  width:600px;
  float:left;
}
#pravo {
  background-color:rgb(102,102,204);
  width:390px;
  height:600px;
  float:left;
}
.clanek {
  margin:20px 20px;
  width:400px;
  background-color:#fff;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}
.txt {
  margin:20px 20px;  
}