Div in Div zentrieren

[Jens Heinerl]

Hi,

ich hoffe ihr könnt mir weiterhelfenk, weil ich bekomms einfach nicht hin. Ich möchte gern ein div Element in einem anderen div Element zentrieren, welches nur auf einer Seite einen Border besitzt. Wie kann ich das realisieren, dass das auch der IE9 versteht.

  
div.tablecontainer {}  
  
div.spalte  
{  
    float:left;  
    border-left: 1px solid black;  
    background: #dcdcdc;  
}  
  
div.cols  
{  
	border-bottom:1px solid black; 		  
	height: 28px;  
	white-space: nowrap;	  
	padding:2px;  
        text-align:center;  
        vertical-align: middle;	  
        line-height: 28px;  
}  
  
  
.cdiv  
 {  
    display:block;  
    border: 1px solid #000;  
    height: 24px;  
    text-align:center;  
    vertical-align: middle;	  
    line-height: 24px;		  
 }  
  

  
  
<div class="tablecontainer">  
<div class="spalte">  
<div class="cols">  
<div class="cdiv"></div>  
</div>  
<div class="cols">  
<div class="cdiv"></div>  
</div>  
  
</div>  
</div>  

Bis jetzt erhalte ich vom .cdiv Border aus gesehen, rechts stets einen größeren Abstand (um 1px) als links zum jeweiligen .spalte Border.

Mein Ziel ist eine Tabelle zu erstellen mittels Divs und der Inhalt in diesen Divs (cols) soll stets zentriert sein.

Mit Tabellen habe ich das ganze schon ausprobiert, nur leider stört mich der Pixelfehler im Firefox und Safari. Beide Browser (auch in den neusten Versionen) sind nicht in der Lage eine Tabelle pixelgenau / sauber darzustellen. Entsprechende Fehlerberichte bzw. Reports existieren bereits seit längerer Zeit, aber finden scheinbar keine Beachtung bei den Entwicklern :-(.

Gruß
Jens