Container takes width of childrens combined width, but issue

JavaScript
1

Hi

I want to make a horizontal scrolling blogpost feed, but I am having some issues.

I have this:

<div class="row">
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
</div>

And this CSS:

.row{
	height: 100vh;
	max-height: 100vh;
	overflow-y: hidden;
	overflow-x: auto;
	min-width: 100%;
}

.post{
    height: 100vh;
    width: 25vw;
    float: left;
}

And this jquery:

$(window).on('load resize', function(){
	var sum = 0;
	$('.post').each( function(){ sum += $(this).width(); });
	$('.row').width( sum );
});

And the .row is getting the correct width, BUT, the last two .posts drops down under the first four, just like if the container width was 100% (or 100vw).

Anyone now how this can be fixed? How can I force the posts to line horizontal?

2

http://jsfiddle.net/gax01ccs/3/ check out nothing change i think your code is work good what you want to change explain in fiddle

1 Like
3

If there is any paddings or margins on .row or .post they should be considered in your calculation

4

EDIT: solved

5

Overflow auto means it will give you scrollbars when it NEEDS to give you scrollbars. You are setting (in javascript) the row element to be equal to the width of all the posts. So why would it give you scrollbars? No element is overflowing outside of the width of .row. You are MAKING it so the width matches the width of all hte inner elements.

If your .row is supposed to be set to the huge width (1195px for me) then just set overflow:hidden; completely for .row and then on .row-wrapper set the overflow-x auto; there.

1 Like
6

Of course. Thanks for clearing that up=)

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.