Odd result when attached to element other than body #4
Description
It seems I can only get this to work when I apply it to body. If I try to contain the gallery inside a div, oddly enough the first 4 images expand to the width of the screen and the last 4 expand to about 50%. They are all stacked vertically.
Sounds like the same issue reported here:
http://www.reddit.com/r/webdev/comments/1kyt2r/perfectly_balanced_photo_galleries_a_jquery_plugin/cbuf99h
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<style type="text/css"></style>
<script src="jquery.min.js"></script>
<script src="jquery.balanced-gallery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#gallery').BalancedGallery({ background: '#DDD' });
});
</script>
</head>
<body>
<div id="gallery">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.jpg">
<img src="6.png">
<img src="7.png">
<img src="8.png">
</div>
</body>
</html>
I've tried adding height:100% and various other styles to the element, to no avail. Any suggestions?