1

I'm working on my first Twitter Bootstrap project and while almost all seems good, I can't find a solution to fill the empty space between spans across rows. So let's say my first row has 3 columns (span4) and 2 of them are 200px in height and the last one is only 50px, I will get a 150px blank space underneath that element. Is there any chance to make those elements float to top like f.e. jQuery masonry or isotope?

Adrian Heine
  • 4,051
  • 2
  • 30
  • 43
Raphael Jeger
  • 11
  • 1
  • 2
  • Have you tried with masonry? – Alessandro Pezzato Dec 21 '12 at 08:28
  • thank you Alessandro, did you mean replacing Bootstrap with masonry or adding it? I really like Bootstrap for it's responsive features and styles, but I need floating to next top element as described above and I need to be able to add elements dynamically with AJAX to the rows... – Raphael Jeger Dec 21 '12 at 08:48
  • http://www.deanclatworthy.com/2012/09/responsive-twitter-bootstrap-masonry/ – Alessandro Pezzato Dec 21 '12 at 10:29
  • Check if the second answer here helps you: http://stackoverflow.com/questions/10239534/how-to-have-multiple-columns-that-consume-100-height-using-twitter-bootstrap – David Taiaroa Dec 22 '12 at 14:16

1 Answers1

0

Further to my note above, here's a responsive CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden.

.col{  
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}

.col-wrap{  
overflow: hidden;   
}

You can see it working at jsFiddle

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50