Hola, buenos días.
Os pongo en situación.
Tengo que conseguir el siguiente efecto: dado un marco dónde existen dos bloques encapsuladores, insertar tres bloques nuevos flotando a izquierdas, y al reducir la ventana de tamaño, que aparezca la barra de desplazamiento horizontal sin que los bloques flotantes cambien su posición.
Llevo varios días con este problema, y sin solución. Creo que no se puede hacer de esta forma, pero antes de darlo por imposible y remitirme al cliente para poder cambiar la estructura HTML quería buscar si alguien sabe como solucionar este evento.
Los códigos que tengo son:
HTML (pasará a ser un XHTML)
Código HTML:
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<link rel="stylesheet" type="text/css" href="style.css">
<a href="#" class="link_w_img"></a> <a href="#" class="link_w_img"></a> <a href="#" class="link_w_img"></a>
CSS
Código CSS:
Ver original#wrapper
{
width: 100%;
overflow: hidden;
}
#scroll
{
overflow-x: auto;
width: 100%;
display: inline;
}
#dClear
{
clear: both;
width: 100%;
}
.link_w_img
{
background: url('01.JPG') no-repeat;
margin-left: 2px;
width: 40px;
height: 40px;
float: left;
}
Por si no queda claro el objetivo de mi problema.
Al hacer "float: left;" todos los bloques internos (<a ...></a>), cuándo cambio el tamaño del explorador, estos bloques ocupan ancho y alto del contenedor "scroll" posicionándose y apilándose de izquierda arriba a derecha abajo.
Yo lo que pretendo es que no se "auto-ajusten" y siempre se queden en línea.
PD: he cambiado el comportamiento "display" del contenedor "scroll", pero sigue sin funcionar.
_actualización 01 :: explicación + pd
_actualización 02 :: nuevo código
_actualización 03 :: solucionado :: ver respuesta