HTML responsive design: about float left

Hello Experts,

Give the example code below:

<head>
<title>Test</title>
<style>
.imgContainer{ float:left; padding: 5px; }
.footer{ clear:both; }
</style>
</head>
<body>
<!-- PAGE 1 begins -->
	<div data-role="page" id="gallery" data-theme="a">			
		<!-- CONTENT -->
		<div data-role="main">
			<div class="galleryContainer">
				<div class='imgContainer'>
				<div><a href='#'><img src="#" style="background-color:blue;width:300px;height:300px"></a></div>
				</div>
				<div class='imgContainer'>
				<div><a href='#'><img src="#" style="background-color:yellow;width:300px;height:600px"></a></div>
				</div>
				<div class='imgContainer'>
				<div><a href='#'><img src="#" style="background-color:red;width:300px;height:600px"></a></div>
				</div>
			</div>
		</div>
		
		<!-- FOOTER -->
		<div data-role="footer" class="footer">
			<div >footer</div>
		</div>	
	</div>
<!-- PAGE 1 ENDS -->	
</body>

Open in new window


when you change the browser size (Right-Left; stop when red img container moves down), the red imgContainer goes below the blue BUT with a big empty space. When creating a responsive design, is there a way to place the red imgContainers just below the blue imgContainer?

Regards,
epifanio67Asked:
Who is Participating?
 
Robert SchuttSoftware EngineerCommented:
I'm not sure that is exactly possible with CSS alone, unless the heights of these boxes are fixed, then the previous comment may get you there.

There is a javascript plugin for this if you need to have blocks with dynamic heights: http://masonry.desandro.com/

I've set up a jsFiddle with your html/css, the link to the plugin ( //cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js ) and the example javascript from the above website changed for your elements:
var msnry = new Masonry( '.galleryContainer', { // note it only works for 1
  columnWidth: 310, // 300 + 2 * 5 (padding)
  itemSelector: '.imgContainer'
});

Open in new window

0
 
David S.Commented:
Not if they're all floated in the same direction, e.g. left. If you float the yellow one to the right or use display:inline-block for some of them instead of floating all of them, you can get much closer to what you want. You may want to make those style changes within a media query block.
0
 
epifanio67Author Commented:
good suggestion Robert... thank you..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.