/    Sign up×
Community /Pin to ProfileBookmark

how to make dynamic floating columns

Hi guys!

in my recent project i need to display dynamic data..(coming from data base).

div containing these data suppose to come in multiple column if enough width is available..(because UI is of liquid width).

i have assigned float: left do divs needed to come into multiple columns.

and its working fine..but only if blocks in a row r of same height.

suppost float:left creates two columns.
then 1st and 2nd div’ll come in a row and 3rd row’ll start from next row.

in this case if height of 1st and 2nd div is different then next row will start where height of 1st and 2nd div will end. in this case 2nd row will take extra padding or spacing from top which is not required.

in short i want to create multiple column data presentation which is not needed to come in multiple rows.

i just want equal spacing div to div vertical or horizontal.

to make it in more contrast.

suppose 1st div’s height is 100px, 2nd div’s height is 70px,

then 3rd div will go under 2nd div(2nd column).

height of 3rd div is 100px.

4th div will com under 1st div(1st column) but its row will start where height of 3rd div will end. so 4th div will have extra spacing of 70px on top with 1st div.

..i think its enough to describe my problem..

it is very critical situation and help is needed in urgent.

thanks in advance.

to post a comment
CSS

0Be the first to comment 😎

×

Success!

Help @blues spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...