Como position y float no se usan juntos (salvo en posicionamientos static o relative) deberás elegir uno.
Si elegis usar float, usá un contenedor para las cajas flotadas de modo que todo lo que esté dentro de ese contenedor esté flotado. Es decir, si tenes más contenido que "#lateral" entonces lo colocas en otra caja que también la flotas.
Finalmente, a dicho contenedor le aplicas overflow:hidden; lo que hará que su alto sea igual a la altura de su caja hija más alta (si no lo haces es = a cero, dando lugar a problemas).
mas detalles (limpiar los float):
http://www.librosweb.es/css_avanzado...ar_floats.html
Si eliges posicionamiento fijo no tendrás que agregar nada, (pero por favor quita ese float demás)
Mirando tu código fuente pude ver
#lateral .content_cats{ ... }
por las dudas probá usar
overflow: auto; en lugar de
overflow-y:auto;
Además veo que en
#lateral ul li img{...} también usas float. Por tanto, controla de "limpiar el flotado" en cada lugar donde uses float. Aquí puede estar el problema.
En los
<li> yo probaría con overflow en lugar de
overflow-x o
overflow-y ya que al ser css2 tenes menos posibilidades de que falle en navegadores viejos, además de que no necesitas otra cosa que overflow:hidden; en dichos
<li>
Todo esto te obliga a realizar pequeños cambios en tu html.
Tomemos por caso los
<li>, lo cual facilmente podras trasladarlo al caso de la columna "
#lateral":
Agregamos dos clases ".
li_left" y ".
li_right"
Código HTML:
Ver original <img class="li_left" src="imgs/categories/ovni.jpg" /> <h3>Pinturas con video
</h3>
El css es genérico, luego para hacerlo más particular podes usar un id en tu
<ul>.
Es importante que controles tus anchos. es decir los anchos totales de las cajas flotadas deben ser <= que el width de su contenedor.
ancho total = margin + padding + width + border
Código CSS:
Ver original​
li{
width:;
overflow: hidden
}
.li_left , .li_right{
float: left;
}
.li_left {
width:;
display: block;
}
.li_right{
width:;
}
Notarás que el contenedor es
"li" y sus hijos son
"li img.li_left" y
"li div.li_right"
El uso de
float:left para ambas cajas (
li_left y
li_right) se debe a que no necesitas espacio entre ellas, aunque si lo queres hacer con float:left y float:right también es válido.
No te aseguro que todo esto solucione tu problema, pero al menos, teniendo un marcado y unos estilos correctos será más fácil identificarlo.
Saludos.