CODEWITHSUNDEEP
csslayout
Martin
Martin

Reputation: 490

CSS float under and left

I have many divs with variable height. I need these divs sort under each other but when they will reach end of window –> create new "column".

Do not overflow but create new "column"

Now divs are overflowing, but I need to create new "column".

BTW:

I have solution using:

-webkit-column-gap: 16px;
-webkit-column-width: 230px;

But I need to support other browsers.

Thank you for your help!

Upvotes: 4

Views: 701

Answers (3)

Martin Turjak
Martin Turjak

Reputation: 21214

To do it with CSS only,

an option would be using column-count and a max-height on the container.

see DEMO

but I am not sure about browser sopport.

It kinda does what you want, at least to some extend, but you would probably be better of with something in javascript.

EDIT: here I paste the CSS:

.container {
    column-count: 3; 
    -webkit-column-count: 3;
    -moz-column-count: 3; 
    -ms-column-count: 3; 
    -o-column-count: 3;

    vertical-align:text-top;

    max-height:100px;
}

Upvotes: 2

RipCorP
RipCorP

Reputation: 25

The another way to solve this issue is using jQuery to get available window height and create each column based in this information. In other way, but still using jQuery, is you use Mansory jQuery (http://masonry.desandro.com/) plugin or Isotope (http://isotope.metafizzy.co/).

Upvotes: 1

Uriah James Rittenhouse
Uriah James Rittenhouse

Reputation: 121

Try something like this: Where maxHeight is exactly equal to height of the window.

<style type="text/css">
.maxHeight {
  display:inline-table;
  height:600px;
  width:50px;
  float:left;
  background-color:#09F;
  margin:3px;
}
.box {
  display:inline-block;
  height:50px;
  width:50px;
  background-color:#33F;
  margin:2px;
}
</style>


<span class="maxHeight">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</span>

<span class="maxHeight">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</span>

<span class="maxHeight">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</span>

The Javascript to loop through this will require a bit of attention but it is plenty possible.

Upvotes: 0

Related Questions