Help?

Hoi,
ik ben bezig met me eerste layout die ik ook helemaal base!
ik kan wel scripts aanpassen dus wou ik er nu een zelf maken!
Maar nu snap ik iets niet..
html

Spoiler tonen

<div id="content_small"></div>
<div id="mid_small">&nbsp;Test Test</div>
<div id="bottom_small" />

css

Spoiler tonen

#content_small {
    background-image: url(images/content_small.PNG);
    width: 192px;
    height: 28px;
    color:#FFFFFF;

}
#bottom_small {
    background-image:url(images/Bottom_small.PNG);
    width: 192px;
    height: 11px;
}



#mid_small {
    background-image: url(images/mid_small.png);
    width: 192px;
    height:auto ;
}

en dan krijg ik dit :

Spoiler tonen

mijn vraag is nu hoe krijg dat vak van de kant af ??

maak eerst de css eens compleet, met width height en margin enz en post het daarna nog eens

Veranderd !
iemand die me wil helpen?

html:

<body>

<div id="container">
  <div id="berichtenbalk" ></div>
  <div id="header"></div>
</div>

css:

body {
    background-image:url(images/bg.PNG);
    background-repeat: repeat-x repeat-y;
}
#container {
    width:900px;
    margin:0 auto;
    }

#berichtenbalk {
    background-image: url(images/berichtenbalk.PNG);
    width:876px;
    height:26px;
    margin: 0;
}
#header {
    background-image:url(images/header.PNG);
    width:876px;
    height:177px;
    margin: 0;
}

zo dan?

Dankjewel

//edit:

nieuw probleem begin post aangepast!

nieuw probleem oplossing:
html:

<div id="left">
  <div id="content_small"></div>
  <div id="mid_small">&nbsp;Test Test</div>
  <div id="bottom_small"></div>
</div>

css:

#left {
width: 192px;
height: auto;
float:left;
margin-left: 10px;
}

#content_small {
    background-image: url(images/content_small.PNG);
    width: 192px;
    height: 28px;
    color:#FFFFFF;

}
#bottom_small {
    background-image:url(images/Bottom_small.PNG);
    width: 192px;
    height: 11px;
}

#mid_small {
    background-image: url(images/mid_small.png);
    width: 192px;
    height:auto ;
}