CSS alternative float DIVs
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 alternative floats with them using odd / even nth-child selectors. However, I want something more complex. Instead of making every node message "clear", I want them to be able to stick next to the node on top of them. Is this only possible through CSS?
Edit: There is no need to randomly assign heights for boxes. Each of the boxes will contain text from the inside (user comments) that will change the height of each one. Sorry if I was not able to illustrate this here.
source to share
I was by no means a CSS guru, but by tinkering with some filler text I was able to get this.
Operators clear:
are created because without them, you sometimes get "even numbers" appearing on the "odd numbers" side.
Chances are, someone better will give you a much better answer.
So, to answer your original question, you want a "sort" perhaps with CSS. I can't figure out why the 7 div starts where it is.
.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>
source to share
Here's an example using float:
JSFiddle
I just noticed that you wanted heights to rely on content. I don't know of any other way to accomplish this to set the height of the boxes based on the largest one using jQuery / JS.
The floating structure relies on the height of the boxes, very precise, so boxes # 1 and # 4, # 2 and # 3, # 5 and # 8, and # 6 and # 7 must have the same height or it just won't 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;
}
source to share
This is possible with a combination of CSS and Javascript such as Freemasonry or Isotope; but most likely it cannot be done with CSS3. Perhaps when CSS4 comes out it will be possible, but it’s a long way off.
Alternatively, what I would like to do is preliminary design which I want, and then define separate classes for the div. For example, in the picture 2 and 3 would be of the same class, and 4, 6 and 7 would be of the same class; and then use CSS positioning, float, margin and padding to define it correctly.
If you want something dynamic, you can't just use CSS; but if you know how you want it to look, you can use CSS by defining separate classes for different divs.
ps you can use css child to define sets of classes, but it still does the same, it is not completely dynamic since you need to know how you want it to look first.
source to share