Geek asks and answers

How to create a responsive horizontal layout using CSS?

I work in a creative design studio that loves to break down paradigms and conventions to create unique website layouts, and recently we started developing horizontal website layouts. Although the horizontal layouts of websites look “cool”, I have yet to figure out how to make them fluid and responsive, as you can, using a website with a vertical grid.

Usually for a vertical website with a container, you will have a percentage width on your container element, and then set the maximum width. Thanks to the flexible layout of your content, the page scrolls endlessly, it can vary in width, especially if the content is unique, and therefore target / context * 100 does not really work (or does it?).

Is it possible for you to have sensitive heights, padding and margins on the elements to make it work just like your responsive grid website. I don't mind using Javascript, but a CSS fix would be perfect.

For your reference, an example of the type of layout I'm trying to create:

enter image description here

+5
source share
2 answers

jQuery, div .outerWidth div .css('width')

HTML:

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

EDIT: css, - , divs #main .

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 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'});
    }
}
+4

.

, div, , :

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

, .

, JavaScript . .

+1
source

More articles:


All Articles