How To Create A Responsive Horizontal Layout Using CSS?

Question

I work for a creative design studio who likes to break paradigms and convention to create unique website layouts and recently we've started developing horizontal website layouts. While horizontal website layouts look "cool" I've yet to work out how to make them fluid and responsive like you can with a vertical grid based website out-of-the-box.

Normally for a vertical website with a container you'd have a percentage based width on your container element, then set a max-width. With a responsive layout your content infinitely scrolls off of the page, it can vary in width especially if the content is unique and therefore the formula target/context * 100 doesn't really work (or does it?).

Is there perhaps a way to have responsive heights, padding and margins on elements to make it work just like you would a grid based responsive website. I don't mind having to use Javascript but a CSS fix would be ideal.

For your reference an example of the type of layout I am trying to create:

Answer 1

You can do this with jQuery by calculating the page container div's child elements .outerWidth and adding them all together and appending that to the page or div's .css('width')

HTML structure:

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

EDIT: I forgot to add the css, but the main point here is you would want the child divs of #main to be floating left.

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

There are many ways to do this.

If you know the exact width of the page you can just make a wrapper div, set the full width, and then float your content divs side by side inside the wrapper like so:

<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>

If you know the exact width, this is the simplest solution.

If the width is unknown or varies, you can use JavaScript to calculate the full width and apply it to the wrapper with the same results. This should work for most needs.