CODEWITHSUNDEEP
javascriptjquerycsshtml
Andy
Andy

Reputation: 780

How to let DIVs floating left when no vertical space

i'm working on a horizontal page layout that currently looks like this:

Div B,C and D have the floating: left property so all DIV are aligned side by side and that is kind of what i want.

(Remember, there are much more DIVs that appear on the right while scrolling the page)

+----------------------------------------+
| Div A                                  |
|                                        |
|  +----------+ +----------+ +--------+  |
|  | Div B    | | Div C    | | Div D  |  |
|  |          | |          | |        |  |
|  +----------+ +----------+ |        |  |
|                            |        |  |
|                            |        |  |
|                            +--------+  |
+----------------------------------------+

There is one problem left, i want it so that the DIVs align vertically if there is enough space so it looks like this:

+---------------------------+
| Div A                     |
|                           |
|  +----------+ +--------+  |
|  | Div B    | | Div D  |  |
|  |          | |        |  |
|  +----------+ |        |  |
|               |        |  |
|  +----------+ |        |  |
|  | Div C    | |        |  |
|  |          | |        |  |
|  +----------+ |        |  |
|               +--------+  |
+---------------------------+

So i guess i'm looking for a way to only apply the floating: left to the DIVs if there is no vertical space left, if thats possible.

Thanks

Upvotes: 0

Views: 103

Answers (1)

fabien
fabien

Reputation: 2258

You do have many easy ways to do what you want when this is just about the 3 divs you take as an example.

For instance, you could take a div E where you put your divs B & C.

Or you could go for the flexbox (flexbox FTW!)

Or you could make all the positions absolute and set everything pixel by pixel. Which would be amazignly complex if you have many divs and if you want to make it responsive... Unless there's a wonderfull library doing it for you... Which happen to be the case !

At first you had masonery : http://masonry.desandro.com/

Then you had isotope : http://isotope.metafizzy.co/

And now you have packery : http://packery.metafizzy.co/

--

All written by the same guy. The first is free, the other have a licencing price (but all the code is on github if you want to fork and make your own)

Upvotes: 1

Related Questions