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

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 2

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;
}