HTML/CSS/JS - Adaptable grid layout?

Question

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?

If you use jQuery you could use isotope: isotope.metafizzy.co — Oriol
– Oriol, Commented Sep 1, 2012 at 21:33
Try to add for each box clear: left; or right maybe it will be enough for now. — Ghassan Elias
– Ghassan Elias, Commented Sep 1, 2012 at 21:38
@Gustonez Do you know how floats and clear work or are you guessing from trial and errors? — FelipeAls
– FelipeAls, Commented Sep 1, 2012 at 21:50
Of course I know, but I was on mobile I couldn't give him an example. here's a quick example of course it could be better if we use columns jsfiddle.net/tkrRv/1 — Ghassan Elias
– Ghassan Elias, Commented Sep 2, 2012 at 5:00

FelipeAls · Accepted Answer · 2012-09-01 21:46:27Z

1

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)

answered Sep 1, 2012 at 21:46

FelipeAls

22.3k9 gold badges57 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tosh · Accepted Answer · 2012-09-01 21:52:17Z

0

Just use javascript! jquery masonry was made for this!

http://masonry.desandro.com/

answered Sep 1, 2012 at 21:52

Tosh

1,85717 silver badges22 bronze badges

1 Comment

Kroltan Over a year ago

Perfect! Using the vanilla verison.

Collectives™ on Stack Overflow

HTML/CSS/JS - Adaptable grid layout?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related