XHTMLforum - Ungewollter Abstand zwischen DIV Container

Hi Ihr,

Ich bin gerade dabei, ein altes HTML-Tabellen Design auf CSS umzumünzen, und sitze nun schon seit Stunden vor dem Problem, das ich den Abstand zwischen zwei DIV-Containern nicht auf null bekomme - sprich es blitzt dort immer der schwarze Hintergrund hervor. Desweiteren geht der Border nicht um den kompletten "Wrapper". Vielleicht bin ich ja auch nur blind und der Fehler ist für den CSS Profi sofort ersichtlich?

Dies ist das alte Design, sprich das ist mein Ziel:
http://www.hopsinaut.de/000001.jpg

Dies ist der aktuelle Status. Zwischen Hundebilder und Nav one, two ist eine schwarze Linie,- resultierend, denke ich mal, aus einem Abstand zwischen den Elementen. Desweiteren geht der Border nicht weiter bei Fuss two.
http://www.hopsinaut.de/000002.jpg

Hier nochmal der Sourcecode:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Hopsinaut.de Layout</title>

<style type="text/css" media="screen">

        body{

                background: #fff;

                margin: 0;

                padding: 0;

                font-family: Arial, sans-serif;

                font-size: 11px;

        }

                

        #wrapper {

                width : 600px;

                margin : 50px auto;

                border : 2px solid #000;

                background-color : #000000;

        }

        #container {

                clear : both;

                width : 600px;

                padding : 0;

                margin : 0;

                border : 0;

        }

        #clinks {

                top : 0;

                float : left;

                padding : 0;

                margin : 0;

                border : 0;

                height : 100%;

                width : 200px;

        }

        #crechts {

                top : 0;

                float : right;

                padding : 0;

                margin : 0;

                border : 0;

                background : #ffffff;

                height : 100%;

                width : 400px;

        }

        #links1 {

                float : left;

                background : #333333;

                height : 30px;

                width : 200px;

                text-align : center;

                font-weight : bold;

        }

        #nav {

                float : right;

                background : #ffcc00;

                height : 30px;

                width : 400px;

                text-align : center;

                font-weight : bold;

        }

        #links2 {

                float : left;

                background : #000000;

                height : 30px;

                width : 200px;

        }

        #fuss {

                float : right;

                background : #ffcc00;

                height : 30px;

                width : 400px;

                text-align : center;

                font-weight : bold;

        }

        h4 {

                font-size : 15px;

                border-bottom : 1px dashed #000;

        }

        p {

                text-align : justify;

        }

        p.source {

                font-size : 10px;

        }

        p.source:before {

                content : 'Quelle: ';

        }

        

</style>



</head>

<body>

<div id="wrapper">

        <div id="container">

                                <img src="logo.gif" alt="Hopsinaut.de Logo" height="100" width="200" border="0" /><img src="header.gif" alt="Hopsinaut.de - Die Seite mit dem Hund." height="100" width="400" border="0" /></div>

        <div id="container">

                                <img src="pic_03.gif" alt="Hopsi schüttelt sich" height="100" width="200" border="0" /><img src="pic_02.gif" alt="Hopsi schläft" height="100" width="200" border="0" /><img src="pic_01.gif" alt="Hopsi auf Achse" height="100" width="200" border="0" /></div>

        <div id="links1">

                nav ONE

        </div>

        <div id="nav">

                nav TWO

        </div>

        

        <div id="container">

                <div id="clinks" align="center">

                                <img src="sagt_01.jpg" alt="Hopsi sagt" height="100" width="100" border="0" />

                </div>        

                <div id="crechts" align="center">

                                <img src="impress.gif" alt="Impressum, Haftungsausschluss, Kopierrecht" height="300" width="300" border="0" />

                </div>                

        </div>

        

        <div id="container">

                <div id="links2">

                                <img src="pfoten.gif" alt="Pfoten" height="30" width="200" border="0" />

                </div>

                <div id="fuss">

                                FUSS TWO

                </div>

        </div>

</div>

</body>

</html>

Könnt Ihr mir helfen?
Liebe Grüße! Tim