0

This is probably a very basic question but I can't get this to work. I want all the divs to pill up to the left until the main div's height is reached and go to the next row.

Using float:left, I get the result on the left (in the picture below)

How can I achieve the result on the right using one general css class that will be applied on each div element? enter image description here

Gadgetster
  • 473
  • 3
  • 12
  • 33

1 Answers1

0

It looks like you're trying to do something similar to masonry. There are a few ways you can do this. If you're going to have dynamic data I'd recommend using the css columns. There's an option here : http://css-tricks.com/seamless-responsive-photo-grid/

There's also a similar question here with a good jqueury answer : How to Create Grid/Tile View with CSS?

If you do NOT have dynamic data, and it's all going to be static then it's likely better to do absolute positioning for your rows, and offset them as needed. Here's a simple jfiddle example : 

   <a href="http://jsfiddle.net/PhantomDude95/j9GbG/"> http://jsfiddle.net/PhantomDude95/j9GbG/ </a>
Community
  • 1
  • 1
Ethan
  • 787
  • 1
  • 8
  • 28
  • i do have dynamic data though, is it possible to do it then? – Gadgetster Jun 03 '14 at 03:23
  • Sure, absolutely. If you only want two columns then what you'll want to do is create another "item" for each one... If you have different data types, say you're pulling data from a mysql database using php... And you happen to be doing two queries, well it'd be simple enough to do a foreach echo against each query. It really depends on what you want to do. Give me a few more details. Are you using php, doing database queries, or using javascript, asp.net, etc? And how many datasources will you have? – Ethan Jun 03 '14 at 03:27
  • I am in fact using database and foreach echo against each query like you said. I found this http://jsfiddle.net/RTLun/, so if I have dynamic data (meaning I don't know the height of each div), I want it arranged like in this jsfiddle i showed – Gadgetster Jun 03 '14 at 03:30
  • I managed to get this effect but it chops off parts of the data and moves it to the next line.. it makes the top and bottom all straight which doesn't matter really as long as all the data is under its category – Gadgetster Jun 03 '14 at 03:32
  • Okay, got you. So... There are a few options here. 1) Use the javascript masonry plugin (not my favorite idea since I'm a javascript hater. :) 2) If you always want that EXACT pattern we just need to decide on a way to run it. For instance use a pattern of some sort or another for the foreach and tell it when to run... Man this is hard to explain. Give me a few minutes to draw up an example. – Ethan Jun 03 '14 at 03:32
  • got it using display: inline-block; width: 100%; ! no javascript! – Gadgetster Jun 03 '14 at 03:33
  • AHhhh okay... Sorry, got side tracked thinking... Well never-mind. I'm glad you got it working :) – Ethan Jun 03 '14 at 03:42