Cómo crear un diseño horizontal receptivo mediante CSS?

Question

Trabajo para un estudio de diseño creativo al que le gusta romper paradigmas y convenciones para crear diseños de sitios web únicos y recientemente comenzamos a desarrollar diseños de sitios web horizontales. Si bien los diseños de sitios web horizontales se ven "geniales", todavía tengo que encontrar la manera de hacerlos fluidos y receptivos, como lo harías con un sitio web basado en una grilla vertical, listo para usar.

Normalmente, para un sitio web vertical con un contenedor, tendría un ancho basado en porcentaje en su elemento de contenedor, luego establezca un ancho máximo. Con un diseño receptivo, su contenido se desplaza infinitamente fuera de la página, puede variar en anchura, especialmente si el contenido es único y, por lo tanto, la fórmula objetivo/contexto * 100 realmente no funciona (¿o sí?).

¿Existe quizás una forma de tener alturas de respuesta, relleno y márgenes en los elementos para que funcione como lo haría con un sitio web receptivo basado en la cuadrícula? No me importa tener que usar Javascript, pero una solución CSS sería ideal.

Para su referencia un ejemplo del tipo de diseño que estoy tratando de crear:

Answer 1

Usted puede hacer esto con jQuery mediante el cálculo de elementos secundarios de la div página recipiente .outerWidth y añadiendo a todos juntos y añadiendo que a la página o estructura .css('width')

HTML div:

<div id="main"> 
    <div><img src="#" /></div> 
    <div><img src="#" /></div> 
    <div><img src="#" /></div> 
</div> 

EDIT: Olvidé agregar el css, pero el punto principal aquí es que querría que los divs secundarios de #main flotaran hacia la izquierda.

Javascript:

function() { 
     var window_width = jQuery(window).width(), 
      container = jQuery('#main'), 
      page_width = 0; 

     // Grab every child element of the "main" container 
     container.children().each(function(index){ 
      var incl_margin = true, 
       $this = jQuery(this); 

      // Check if each child element has a margin-left or margin-right 
      if (parseInt($this.css('margin-left')) < 0 || parseInt($this.css('margin-right')) < 0) { 
       var incl_margin = false; 
      } 

      // Get element's width including margins (if they exist from above) 
      var width = $this.outerWidth(incl_margin); 
      page_width += width; 

     }); 

     // Add total width of containers elements as the containers width 
     if(page_width > 0) 
      container.css({'width' : page_width + 'px'}); 
    } 
} 

Answer 2

Hay muchas maneras de hacer esto.

Si conoce la anchura exacta de la página se puede simplemente hacer un div contenedor, establecer el ancho completo, y luego flotar su lado divs contenido al lado del otro en el interior del envoltorio de este modo:

<div style="width: 2500px; border: red solid 1px;"> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
</div> 

Si saber el ancho exacto, esta es la solución más simple.

Si el ancho es desconocido o varía, puede usar JavaScript para calcular el ancho completo y aplicarlo al envoltorio con los mismos resultados. Esto debería funcionar para la mayoría de las necesidades.