Footer won't flow below wrapper…

[Anonymous]

Hi everyone…

I’m using javascript to dynamically calculate the width + margins of a series of elements so they form a masonry-style grid. The grid works as intended, but I can’t seem to find a way to have content flow beneath the wrapper. Each grid module is positioned absolute to the parent and dynamically changes coordinates based on the window size.

Any ideas how to solve this?

Demo: http://jsfiddle.net/GnM2m/show

[Merri]

Give a height to .grid too. Absolutely positioned elements do not have effect to the flow of their container, or any other element.

[Anonymous]

@merri

In most cases that would do the trick, but the grid wrapper height changes dynamically according to the window width. The height will increase if the window width shrinks and vice versa.

With that said, defining a static height fails to solve the problem. For testing purposes, I gave the grid wrapper a height and width of 100%…same result

[jaimebarriga]

As @merri said, since they are absolutely positioned, they are out of the normal flow of the document. It’s like they weren’t there. You would have to recalculate the height everytime the window is resized. Take a look at this website. Like in yours, all the elements are positioned absolutely, but the height of the container is set through javascript, even when you resize it. Only other way would be to float:left all the children

[Anonymous]

@jaimebarriga

Would you mind showing me how this can work? I don’t have the chops to solve it on my own unfortunately. I tried the following, but it didn’t seem to work…

$('.grid').css({ 'margin-bottom': '100px' });

[vishal shetty]

@noob I am also facing the same problem. Did u get any solution from anyone? Please let me know

[Author]

Posts