[SOLUCIONADO] Problemas con div

[MigueCadiz]

Por favor me estoy volviendo loco.
Tengo esta estructura HTML:
<div id="principal">
<div id="header">


</div><!--fin header-->

<div id="contenedor">
contenedor

<div style="clear:both"></div>
<div id="contenidoindex">
contenido
</div><!--Fin contenido-->

<div id="sidebarIndex">
sidebar
</div><!--fin sidebarindex-->
</div><!--fin contenedor-->

<DIV style="clear:both"></DIV>
<div id="footer">

footer
</div><!--fin footer-->
</div><!--fin principal-->

Y este css:

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
margin:0px; padding:0px;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: #fff;
}

#principal {
background:url(../imagenes/fondoagua.png) top left repeat fixed;


}

#header {
margin:10px auto;
height:140px;
width:930px;
background:url(../imagenes/FondoHeader.jpg) no-repeat;

}

#contenedor{
width: 930px;
margin: 0px auto;
background-color:#fff;
padding:0px 0px 0px 0px;
}


#contenidoindex {
width: 665px;
background-color:#fff;
float:left;
}




#sidebarIndex{
width:200px;
height:auto;
float:left;
border: 1px solid #CED5D7;
border-radius: 6px;
padding: 10px 20px 20px;
margin:35px 0px 0px 20px;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset;

}

#footer {

margin: 15px auto;
height:100px;
width:930px;
background:url(../imagenes/Motivo.png) repeat-x;
}

Se supone que los DIV contenidoindex y sidebarindex deben estar dentro del DIV contenedor, pero no es así.
Cuando entro en dreamweaver el div contenedor se queda por encima de los otros dos.
También lo he probado con firebug de firefox
Alguien puede explicarmelo, soy novato.
Gracias

[C2am]

Busca "limpiar float".
Por ejemplo:
http://librosweb.es/css_avanzado/cap...ar_floats.html

Para la próxima utiliza el highlight para postear código:

Código HTML:

<div id="principal">
<div id="header">
 
 
</div><!--fin header-->
 
<div id="contenedor">
contenedor
 
<div style="clear:both"></div> 
<div id="contenidoindex">
contenido
</div><!--Fin contenido-->
 
<div id="sidebarIndex">
sidebar
</div><!--fin sidebarindex-->
</div><!--fin contenedor-->
 
<DIV style="clear:both"></DIV>
<div id="footer">
 
footer
</div><!--fin footer-->
</div><!--fin principal-->
 

Código CSS:

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
margin:0px; padding:0px;
}
 
body {
font-family: Arial, Helvetica, sans-serif;
background: #fff;
}
 
#principal {
background:url(../imagenes/fondoagua.png) top left repeat fixed;
 
 
}
 
#header {
margin:10px auto;
height:140px;
width:930px;
background:url(../imagenes/FondoHeader.jpg) no-repeat;
 
}
 
#contenedor{
width: 930px;
margin: 0px auto;
background-color:#fff;
padding:0px 0px 0px 0px;
}
 
 
#contenidoindex {
width: 665px;
background-color:#fff;
float:left;
}
 
 
 
 
#sidebarIndex{
width:200px;
height:auto;
float:left;
border: 1px solid #CED5D7;
border-radius: 6px;
padding: 10px 20px 20px;
margin:35px 0px 0px 20px;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset;
 
}
 
#footer {
 
margin: 15px auto;
height:100px;
width:930px;
background:url(../imagenes/Motivo.png) repeat-x;
}
 

Saludos

[MigueCadiz]

Muchas gracias. Exactamente lo que buscaba.