HTML responsive design: about float left

Hello Experts,

Give the example code below:

.imgContainer{ float:left; padding: 5px; }
.footer{ clear:both; }
<!-- 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 class='imgContainer'>
				<div><a href='#'><img src="#" style="background-color:yellow;width:300px;height:600px"></a></div>
				<div class='imgContainer'>
				<div><a href='#'><img src="#" style="background-color:red;width:300px;height:600px"></a></div>
		<!-- FOOTER -->
		<div data-role="footer" class="footer">
			<div >footer</div>
<!-- PAGE 1 ENDS -->	

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?

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:

I've set up a jsFiddle with your html/css, the link to the plugin ( // ) 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

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.
epifanio67Author Commented:
good suggestion Robert... thank you..
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.