CSS alternate floating of DIVs

Question

I have the following html code:

<div class="messages">
    <div class="message">1</div>
    <div class="message">2</div>
    <div class="message">3</div>
    <div class="message">4</div>
    <div class="message">5</div>
    <div class="message">6</div>
    <div class="message">7</div>
    <div class="message">8</div>
</div>

What I want to do is do some alternate float with them using odd/even nth-child selectors. However I want something a little more sophisticated. Instead of having each message node do a "clear", I want them to be able to stick close to the node on top of them. Is this possible through CSS only?

Edit: There is no need to randomly assign heights for the boxes. Each of the boxes will have body of text inside of them (people's comments) which will make the heights variable for each one. I'm sorry if I failed to illustrate that here.

Answer 1

It's possible with a combination of CSS and Javascript, like Masonry or Isotope; but most likely cannot be done with CSS3. Maybe when CSS4 comes out it will be possible, but that's a long way off.

Alternatively, what I would do is pre-design what I want and then define separate classes to the divs. FOr example, in the picture, 2 and 3 would be the same class, and 4, 6, and 7 would be the same class; and then use CSS positioning, floats, margin, and padding to define appropriately.

If you want something dynamic, you can't with CSS alone; but if you know what you want it to look like, you can use CSS by defining separate classes to the different divs.

p.s. you can use css child to define sets of classes, but it's still doing the same thing, it's not completely dynamic as you'll need to know what you want it to look like first.

Answer 2

I am by no means a CSS guru, but in messing around with some filler text, I was able to get this.

the clear: statements are made because without them you sometimes get "even numbers" appearing on the "odd numbers" side.

Odds are someone way better will give you a much better answer.

So to answer your original question, what you want is "sort of" possible with CSS. I can't figure out why the 7 div starts where it does.

.alt,
body,
html {
  height: 100%;
}
.alt div:nth-child(even) {
  float: right;
  clear: right;
}
.alt div:nth-child(odd) {
  float: left;
  clear: left;
}
.alt div {
  box-sizing: border-box;
  width: calc(50% - 5px);
  margin-bottom: 5px;
  border: 1px dotted grey;
}

<div class="alt">
  <div>1 lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>2 lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>3 lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>4 lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.
    lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem
    ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>5lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>6lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>7lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem
    ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum
    dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>8 lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
</div>

Answer 3

Here's an example using floats:

JSFiddle

---

I just now noticed that you wanted to have the heights rely on the contents. I know of no other way to accomplish this then to set the heights of the boxes based on the largest one using jQuery/JS.

The floating structure relies on the heights of the boxes being very precise, so boxes #1 and #4, #2 and #3, #5 and #8, and #6 and #7 must all have the same height or it simply will not work.

---

Otherwise, here you go, with static heights:

HTML:

<div class="container">
    <div class="message"></div>
    <div class="message"></div>
    <div class="message"></div>
    <div class="message"></div>
    <div class="message short"></div>
    <div class="message short"></div>
    <div class="message short"></div>
    <div class="message short"></div>
</div>

CSS:

div.container
{
    width: 600px;
    font-size: 0;
}

div.message {
    display: inline-block;
    height: 300px;
    width: calc(50% - 10px);
    background: #ccc;
    
    margin: 5px;
}

div.message.short
{
    height: 200px;
}

div.message:nth-child(4n-3),
div.message:nth-child(4n)
{
    float: left;
}

div.message:nth-child(4n-1)
{
    float: right;
}

div.message:nth-child(4n-2),
div.message:nth-child(4n)
{
    height: 100px;
}