How can I make a float top with CSS?

Question

I know that CSS only supports left and right values for the float property, but is there a technique to implement a floating top? I will try to explain. I have the following code:

<div style="float:left">
<div style="float:left">
<div style="float:left">
....

With this code every div is floated to left until the right limit of the page is reached. I want to do the same thing but vertically, so that every div is placed at the bottom of the previous one and then, when the bottom limit of the page is reached, a new column is created. Is there a way to do this using only CSS (and maybe editing the HTML code)?

Answer 1

The only way to do this with CSS only is by using CSS 3 which is not going to work on every browser (only the latest generation like FF 3.5, Opera, Safari, Chrome).

Indeed with CSS 3 there's this awesome property : column-count that you can use like so :

#myContent{
  column-count: 2;
  column-gap: 20px;
  height: 350px;
}

If #myContent is wrapping your other divs.

More info here : http://www.quirksmode.org/css/multicolumn.html

As you can read there, there are serious limitations in using this. In the example above, it will only add up to one another column if the content overflows. in mozilla you can use the column-width property that allows you to divide the content in as many columns as needed.

Otherwise you'll have to distribute the content between different divs in Javascript or in the backend.

Answer 2

There is no float:top, only float:left and float:right

If you wish to display div underneath each other you would have to do:

<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>

Answer 3

I think the best way to accomplish what you're talking about is to have a set of divs that will be your columns, and populate those in the way you described. Then fill those divs vertically with the content you're talking about.

Answer 4

You might be able to do something with sibling selectors e.g.:

div + div + div + div{ float: left }

Not tried it but this might float the 4th div left perhaps doign what you want. Again not fully supported.