CODEWITHSUNDEEP
javascripthtmlcss
Kroltan
Kroltan

Reputation: 5156

HTML/CSS/JS - Adaptable grid layout?

I have some (unknown height) elements that adjust themselves horizontally with float: left;, but if one of those elements is taller, there is a space over the one in the next row. I'd like to move that element to the empty space over it. Here's a picture of the problem: Empty space over element, must move it there Is it possible to do this without JavaScript? Either way, how can I do this?

Upvotes: 0

Views: 485

Answers (2)

Tosh
Tosh

Reputation: 1857

Just use javascript! jquery masonry was made for this!

http://masonry.desandro.com/

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22161

In CSS without JS:

  • you could have "Fotos" vertically aligned relative to "Contato" with display: inline-block (whitespace is a bit annoying and there's an equivalent for IE6/7 if needed)

  • you could have blocks of equal heights on each "line" either with faux-columns or CSS table layout (unrelated to unsemantic HTML table layout with table, tr and td elements. Here it's layout with the elements of your choice)

  • if you want to stack as much blocks as possible, then you'll have to create 2 columns, float them and stuff them with your blocks. This would change their order in your HTML code as they'd be written from top to bottom and then left to right ("Fotos" would come right after "Home" in the HTML code)

Upvotes: 1

Related Questions