Odpověď na otázku

Mám takýto HTML kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Skuska</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body id="body">
  <center>
    <div id="main">
      <div id="middle">
        <div class='left'>
          Niečo pod obrázkom<br>
          Niečo pod obrázkom<br>
        </div>
        <div class='left'>
          Niečo pod obrázkom<br>
          Niečo pod obrázkom<br>
        </div>
        <div class='left'>
          Niečo pod obrázkom<br>
          Niečo pod obrázkom<br>
        </div>
      </div>
    </div>
  </center>
</body>
</html>

K nemu odpovedajúci CSS súbor:

#body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
}
#main {
  width: 780px;
  text-align: left;
  background-color: #FFFFFF;
}
#middle {
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #000000;
  border-right-color: #000000;
  border-bottom-color: #000000;
  border-left-color: #000000;
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  padding: 5px;
  height: 100%;
}
.left {
  float: left;
}

Tento kód zobrazí Firefox tak, že #middle bude mať šírku padding zhora aj z dola, čiže 10 spolu. Znamená to, že FF nezaujíma, aký kód sa v tagu nachádza, ale ho stlačí, pretože vo vnorených tagoch je stýl float: left. IE ho zobrazí správne. Aby som dosiahol správne zobrazenie vo FF, vložil som do #middle tabuľku:

        <table><tr><td>
        <div class='left'>
          Niečo pod obrázkom<br>
          Niečo pod obrázkom<br>
        </div>
        <div class='left'>
          Niečo pod obrázkom<br>
          Niečo pod obrázkom<br>
        </div>
        <div class='left'>
          Niečo pod obrázkom<br>
          Niečo pod obrázkom<br>
        </div>
        </td></tr></table>

Teraz kód zobrazí správne aj FF aj IE. Ak tabuľku opäť odstránim, tak cache robí zázraky. FF stránku zobrazuje naďalej správne, ale IE už nie! Zaujímavé je, že IE zobrazoval kód správne pred vložením tabuľky, ale po odstránení už nie.

Ale ide mi o to, že chcem tento kód zobraziť vždy správne aj pri FF aj IE aj v Opere a nechcem tam tabuľku. Ako na to?

HTML - Ako napísať tento kód bez tabuľky?