XHTMLforum - CSS/HTML Layout Herrausforderung

Hallo Leute,

ich bin leider am verzweifeln. Sitze jetzt seit ner ganzen Weile an einem kleinen Projekt. Geht um ne kleine Pre-Page für einen OnlineShop. Nur leider bekomm ich nichtmal den Grundaufbau hin. Trotz HTML und CSS Kenntnisse. Hab im Photoshop mir das Layout gebastelt und gesliced und nun wollte ich es zusammensetzen.

Ziel war es das Layout wie im Bild unten zu sehen umzusetzen. Hatte dann aber Schwierigkeiten mit dem nebeneinander. Hatte es zuerst über inline-box versucht, dann doch über float. So hatte ich zumindest erstmal shopbalken links und navi+text(eingepackt in context) rechts. Allerdings hat es mir dann wieder Margin zerschossen und mein Footer ist unter dem Header hängen geblieben.

Habt Ihr eine Idee wie man dies umsetzen könnte?

So sollte es ungefähr aussehen.

Hier das aktuelle Chaos.

CSS:

Code:

@charset "utf-8";

/* CSS Document */



#all{

        width:990px;

                margin: 0px auto;

        

}



#header{

        width:990px;

        height:206px;

                margin:0px 0px 0px 0px;

                padding:0px;

}





#shopbalken{

                width:206px;

                height:496px;

                float:left;

                background-image:url(images/layout/shopbalken.png);

                background-repeat:no-repeat;

                margin-top:12px;

}



#content{

                float:right;

                width:772px;

                height:496px;

                padding:0px;                

                background-color:#FFFF00;

                margin-top:12px;

                padding:0px;

                

}



#navi{

                width:772px;

                height:42px;

                background-image:url(images/layout/navi.png);

                padding:0px;

                list-style:none;                                

}



#text{

                width:772px;

                height:200px;

                background-color:#e6e6e6;

                margin:0px;

                padding:0px;                        

}



#footer{



                width:990px;

                height:28px;

                padding:0px;

}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Schuleinrichtung R.Berndt & D. Merkwitz</title>

<link href="format.css" rel="stylesheet" type="text/css" />

</head>



<body>



        <div id="all">



                <div id="header">

        <a href="index.html"><img src="http://xhtmlforum.de/images/layout/header.png" border="none" alt="Kopfzeile" title=""/></a>

                </div>



            <div id="shopbalken">

            <p>Shopbalken</p>

                        </div>

                                   

            <div id="content"> 

                 

                <div id="navi">

                <p>Navi</p>

                </div>

                

                <div id="text">

                <p>blablabla</p>

                </div>



            </div>

            

            <div id="footer">

            <img src="http://xhtmlforum.de/images/layout/footer.png"/>

            </div>

              

        </div>



</body>

</html>

Ich wäre für Hinweise sehr dankbar!

Gruß
lbm