Problema con divs en Responsive Web Design

[alvarols]

Tengo una plantilla RWD, pero a la hora de querer meter un div (que es básicamente el sidebar de un blog que se va automáticamente abajo cuando se estrecha la pantalla) este no se alinea correctamente y las distancias entre el div y los bordes cambian al estar cambiando el tamaño del navegador.

Aquí les muestro la imagen de lo que sí está bien (con palomita) y el div que tiene problemas (con tache)



Este es el código del sidebar standard:

Código CSS:

.sidecontainer{
    width:20%;
    height:200px;
    -webkit-box-shadow: 0px 0px 19px rgba(50, 50, 50, 0.19);
-moz-box-shadow:    0px 0px 19px rgba(50, 50, 50, 0.19);
box-shadow:         0px 0px 19px rgba(50, 50, 50, 0.19);
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
background:#FFF;
padding:25px;
margin-left:10px;
margin-bottom:12px;
float:left;
}
 

Y esto es el código que adapta lo que es el sidebar a la parte de abajo cuando la pantalla tiene menos de 760px de ancho:

Código CSS:

@media screen and (max-width: 760px) { 
.sidecontainer{
    width:100%;
    margin:2% 28px 0% 28px;
    padding:0px;
}
}
 

Gracias

[alvarols]

Nadie supo :(

[pzin]

Yo es que no entendí. Demasiado original la imagen. Además tampoco muestras el HTML.

[alvarols]

A ver, es que el HTML es muy sencillo. Es esto básicamente:

Código HTML:

<div class="sidebar">
    <div class="sidecontainer">
    </div>  
</div>
 

[pzin]

Bueno, yo decía del resto.

De todas formas, si pones un ancho de 100% y un margen lateral de 28 pixeles, el ancho que ocupe en pantalla no va a ser 100, sino 100%+48px. Supongo que será eso lo que pasa.