Menu
I'm experimenting with CSS and the float property. I have this "website", with a lot of divs aligned to 80px grid and float: left:
Is there a way in CSS to make it looking like this - so the elements can use empty space above them?
Without JavaScript, if it's possible.
Thanks, Martin.
466
Floats are an excellent way to position elements on your page, sometimes essential in fact. Show activity on this post. When using float, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible.
Using floats we are limited to place items left or right but using flexbox we can modify our models in all four directions. Flexbox is a new concept in CSS to achieve a responsive webpage with some important properties of flexbox. We should use flexbox over floats.
Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag. For example, widening the screen would cause more elements to fit on the top line, so they would jump up.
No, this can't be done in CSS. Best way is to use a javascript item called masonry I'm afraid.
http://masonry.desandro.com/
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
