Problemas de superposición del sidebar en el footer con el .clear

¡Hola!

estoy intentando dar un cambio de apariencia a una web. Os cuento la estructura:

CABECERA---------------

CONTENIDO -----SIDEBAR
CONTENIDO------SIDEBAR
CONTENIDO -----SIDEBAR
CONTENIDO------SIDEBAR
CONTENIDO -----SIDEBAR
-----------------SIDEBAR

FOOTER O PIE DE PÁGINA-

Resulta que, si el contenido es menor que el tamaño (en altura) del sidebar, este se superpone en el pie de página :s. Ilustro para que se vea más claro:



Con la estructura del div "contenido" no me pasa. El final del sidebar es este:

<div class="clear"></div>
</div><!-- /sidebar.right -->

El .clear es este:

.clear {
content: ".";
height: 0;
display: block;
clear: both;
visibility: hidden;
}

El footer es este:

/* Footer
--------------------------------------------------- ***/
#footer {
clear: both;
float: left;

¿Alguna idea de dónde tengo el fallo? Muchas gracias de antemano por las respuestas.

Mmm por qué no insertas el footer fuera del div que contiene tanto el contenido como el sidebar? así siempre quedará debajo sin impotar cual de esos dos tenga más altura.

Bueno, es una opción.

Hola!

gracias por responder. El problema es que ya lo tengo así. Ando repasando bien todas las medidas de los divs a ver si hay algo que me descuadra y viendo si me falta por cerrar alguno, pero es bastante código. A ver si doy con la tecla.

Un saludo!

Podrias dar la url?

Chapi dijo:

Podrias dar la url?

Hacer clic para expandir...

Hola! Al final después de echarle muchas horas no conseguí encontrar el fallo así que me puse con otra plantilla que controlo más y le estoy metiendo las cosas que me gustan de esta. Me dí por vencido 🙁

Gracias de todas formas por el interés Chapi.

No hay problema, suerte con eso.

Mmmm, intenta ponerle al estilo del sidebar float:right; clear:right; margin-bottom:20px;

Al footer podrias ponerle clear:both; width:100%; margin:auto; float:left;