javascript - Floating divs - variable height and variable columns - with no gaps -

javascript - Floating divs - variable height and variable columns - with no gaps -

i have updated fiddles, see bottom

i developing wordpress theme work on iphone , ipads , other webkit devices.

i using media queries alter width of divs depending on size , orientation of device.

these divs float left, fill device screen.

my problem floated div's height variable. , div's higher some, causing gap issues on floated elements.

i need possible advice on prepare there never gaps, , elements float, if there higher div in path.

is there possible way of equalizing div heights highest div, problem need work orientation changes on ipad. on iphone it's not bad because there 1 column. on ipad, portrait has 2 columns , landscape has 3 columns.

please see diagram below explaining issue.

current css

/* global style ( iphone uses first - 1 column ) ----------- */ .module { display: block; overflow: hidden; width: 100%; float: left; } /* ipads (portrait - 2 column ) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : portrait) { .module { width: 50%; } } /* ipads (landscape - 3 column ) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : landscape) { .module { width: 33.33%; } }

basic markup

<div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> </div>

update - have created pure css fiddles simulate problem

the fiddle below simulates smartphones (portrait , landscape) - one column

see style .module - width: 100% simulates appearance of @media query

@media screen , (min-device-width : 320px) , (max-device-width : 480px)

http://jsfiddle.net/motocomdigital/kdgnp/1/

the fiddle below simulates ipads (portrait) - two column

see style .module - width: 50% simulates appearance of @media query

@media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : portrait) {

http://jsfiddle.net/motocomdigital/kdgnp/2/

the fiddle below simulates ipads (landscape) - three column

see style .module - width: 33.33% simulates appearance of @media query

@media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : landscape) {

http://jsfiddle.net/motocomdigital/kdgnp/3/

like said in comment, need calculate in javascript , utilize absolute positioning. here example:

http://jsfiddle.net/rjxtm/4/

//generate random height each module, doesn't need done because //they have various amounts of contents in real app. $(".module").each(function(i) { var height = (150 + (math.random() * 100 | 0)); this.style.height = height + "px"; }); $(window).bind("orientationchange resize", function(e) { var modules = $(".module"), columnwidth = modules[0].offsetwidth, margin = 10, parentwidth = $(".modules").width(), fits = math.floor(parentwidth / (columnwidth + margin * 2)), columnheights = {}, i; (i = 0; < fits; ++i) { columnheights[i] = 0; } function gettop(i) { var ncolumn = % fits; homecoming columnheights[ncolumn]; } modules.each(function(i) { var height = this.offsetheight, //now retrieving height ncolumn = % fits; this.style.left = ((columnwidth + margin) * ncolumn) + "px"; this.style.top = gettop(i) + "px"; columnheights[ncolumn] += (height + margin); }); }).trigger("resize");

javascript css dynamic css-float orientation