CSS get rid of extra spacing when using float:left; - css

I have a bunch of red squares with flexible content.
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
I would like it that if the screen is wide enough, instead of showing each block by block, I would put two side by side.
I was able to do this but when I do it like this there is extra spacing if the two elements have different heights.
See my jsFiddle: https://jsfiddle.net/78k9vvf6/
.block {
width: 40%;
margin-right: 10%;
margin-top: 10px;
margin-bottom: 10px;
background: red;
color: white;
float: left;
}
Does anyone know of anyway to get rid of this extra spacing?
I do not want to put them into separate parent elements, because if I do it like that I will have to change the elements' parents every time I resize the screen.
Thanks in advance,
David


You can have the elements occupy all of the vertical space by making the parent display: flex; flex-wrap: wrap;.
If you want the elements to move up so that they fill the vertical gaps created, there is no easy way to do that just with CSS. You would need to use a library like masonry.
.parent {
display: flex;
flex-wrap: wrap;
}
.block {
width: 40%;
margin-right: 10%;
margin-top: 10px;
margin-bottom: 10px;
background: red;
color: white;
}
<div class="parent">
<div class="block">
hello.
<br>stackoverflow.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.<br>
world.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
</div>
*edit - Since you said you want the items to shift up, here's a demo with masonry.
$('.parent').masonry();
.block {
width: 40%;
margin-right: 10%;
margin-top: 10px;
margin-bottom: 10px;
background: red;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="parent">
<div class="block">
hello.
<br>stackoverflow.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
hello.<br>
world.
</div>
<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
</div>


Another way of doing this without using any javascript or libraries is to use float:left; and float:right;.
By doing this they will shift up, because floating to the right and to the left are independent from each other.
For example, when floating to the right, it acts as if there is no elements on the left.
For the elements on the left use float: left', for the elements on the right use float: right;.
Here is a JSFiddle: https://jsfiddle.net/78k9vvf6/2/
You may need to update the width of the parent container, to have the elements still positioned in the correct area.
To target every second item to float to the left instead of the right, I used the css nth-child. See below:
.block {
...
float: left;
}
.block:nth-child(even) { /* even -> every second block */
float: right;
}
I know it seems like this is pointless and that you could just have two containers - one for the right, one for the left - and float them both to the left, but the reason it had to be done this way is because I needed them to be able to go one under each other when the screen got too small. To do that, I used a media query and when the screen was to small I floated each element to the left:
#media screen and (max-width: X px) {
.block { float: left; }
}
The only disadvantage to this solution compared to the masonry solution that I know of is that if pure out of luck it happens that all the items on the right are way taller than the items on the left, there will be lots of extra space on the bottom left. You can see that in the JSFiddle link given above.
Also you need to clear the right.

Related

How to custom scroll bar with default arrow in css

I want to customize the width and height of scrollbar but with default arrow
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
I didnt get default arrow. can anybody suggest here

::-webkit-scrollbar-thumb {
background-color: #b0b0b0;
background-clip: padding-box;
border: 0.05em solid #eeeeee;
border-radius: 10px;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
background-color: #bbbbbb;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 8px 8px 8px;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
border-width: 8px 0 8px 8px;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 8px 8px 0 8px;
border-color: #555555 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {
border-color: #777777 transparent transparent transparent;
}
/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
border-width: 8px 8px 8px 0;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
<div style="color:black;height:300px;width:600px;padding:8px;font-size:22px;overflow-y:scroll;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam ac tortor vitae purus. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Nullam ac tortor vitae purus faucibus
ornare. Risus quis varius quam quisque id diam vel quam. In egestas erat imperdiet sed euismod nisi porta. Elementum eu facilisis sed odio morbi quis commodo odio aenean. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Mattis
pellentesque id nibh tortor id. Ullamcorper a lacus vestibulum sed arcu non. Lectus mauris ultrices eros in cursus turpis. Ipsum dolor sit amet consectetur adipiscing elit duis tristique. Ultricies mi eget mauris pharetra et ultrices. Id aliquet risus
feugiat in. Quam vulputate dignissim suspendisse in est. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Sed arcu non odio euismod lacinia. Sed blandit libero volutpat sed cras ornare arcu dui. Ultrices tincidunt arcu non sodales
neque sodales. Arcu dictum varius duis at consectetur lorem donec massa sapien. Vitae purus faucibus ornare suspendisse sed. Morbi tristique senectus et netus et malesuada fames. Adipiscing diam donec adipiscing tristique. Euismod lacinia at quis risus
sed. Pulvinar sapien et ligula ullamcorper malesuada proin libero.
</div>
You have to use
::-webkit-scrollbar-thumb for thumb holder
::-webkit-scrollbar-button:single-button,:vertical:decrement,:vertical:increment,:horizontal:decrement,:horizontal:increment, for buttons

Note: The -webkit-scrollbar is not supported in Firefox or in Edge, prior to version 79. check caniuse and MDN CSS Scrollbars
for more ways to create arrows : How to add arrows with -webkit-scrollbar-button
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
background-color: rgb(64, 64, 64);
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: rgb(96, 96, 96);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: rgb(112, 112, 112);
}
/* Handle on active*/
::-webkit-scrollbar-thumb:active {
background-color: rgb(128, 128, 128);
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
background-color: rgb(64, 64, 64);
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
height: 12px;
width: 16px;
background-position: center 4px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
height: 12px;
width: 16px;
background-position: center 2px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}
/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
height: 12px;
width: 12px;
background-position: 3px 3px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
}
/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
height: 12px;
width: 12px;
background-position: 3px 3px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:increment:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
}
<p></p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
res
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Display: Flex not adjusting flex items height with fluidity based on content inside the flex item [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 2 years ago.
I am trying to achieve the fluid height of the .flex-item containers according to the content pushed into them , beside also maintaining the display: flex behavior in it such that there is no whitespace left horizontally or vertically between the .flex-item and packing them beside each other in all the space provided.
As you run the code and observe the output i do not want to affect my second .flex-item due to the lengthy content in the first .flex-item, it should stick to the height of it's content and yet be aligned to other flex-items.
<!DOCTYPE html>
<head>
<title>question</title>
<style>
body{
display: flex;
flex-wrap: wrap;
}
div.flex-item{
width: 200px;
text-align: center;
background: linear-gradient(180deg, #eeeeee, #cccccc);
border: 1px solid #efefef;
margin: 12px;
}
</style>
</head>
<body>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
</body>

The align-items property set to flex-start will resolve this issue.
However, if you want the items lower items to fill out the empty space in the right column, you will need to use a Javascript library such as Masonry (https://masonry.desandro.com/).
<!DOCTYPE html>
<head>
<title>question</title>
<style>
body{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
div.flex-item{
width: 200px;
text-align: center;
background: linear-gradient(180deg, #eeeeee, #cccccc);
border: 1px solid #efefef;
margin: 12px;
}
</style>
</head>
<body>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
</body>

Stack sticky element after other sticky element with dynamic height

I need to stack few sticky header elements like this:
https://webthemez.com/demo/sticky-multi-header-scroll/index.html
There are solutions for this question in stackover in here. But in my case my sticky headers have dynamic heights. Therefore not possible to hard code top position for stick headers. My code is like below:
html
<div class="sticky-header1">
Header 1 with dynamic height
</div>
<div>
Header 1 content
</div>
<div class="sticky-header2">
Header 2 with dynamic height
</div>
<div>
Header 2 content
</div>
css
.sticky-header1,
.sticky-header2
{
position: sticky;
}
Is it possible to set stacked sticky header in this scenario? Pure CSS solution is preferred.

maybe u need to use javascript like this:
firstdiv =document.querySelector(".first");
secondiv =document.querySelector(".second");
thirdiv = document.querySelector(".third");
const fheight = firstdiv.offsetHeight;
const sheight = secondiv.offsetHeight;
secondiv.style.top= `${fheight}px`;
thirdiv.style.top= `${fheight+sheight}px`;
body {
margin:0;
min-height:200vh;
border:2px solid;
}
.first {
height:50px;
background:red;
position:sticky;
top:0;
}
.second {
height:60px;
background:blue;
position:sticky;
}
.third {
height:80px;
background:green;
position:sticky;
}
<div class="first"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="second"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="third"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

I don't think you can achieve that only with CSS. Even if you ever managed to it will be very fragile and you need to have into account that there's some browsers that won't accept the sticky position! I would go with a javascript based solutions instead

It is not possible using pure CSS, you when if the known or constant height element and not increase element then it's possible (it's not good). Another way you use simple javascript and just calculation for element height and set CSS position top property.

CSS alternate floating of 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 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.

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>

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

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.

Force dynamic div's to be on the same line

Hey guys i really need some help here:)
my problem is that i got 2 dynamic width div's inside a div, they go from 460 to 640px (just an example) and my site spands from 960px to 1300px, so when my site is 1300px wide i want both div's to be on the same line with a width of 640px, and when the site is 960px i want the div's to be on the same line with a width of 460px.
my problem is that, when the sites get smaller (dragging the width of the browser), they drop below each other.
here is some code: http://jsfiddle.net/EKYLe/2/
Here is the html:
<div class="Content">
<div class="box-container">
<div class="box">
<h2>Nyheder</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="box">
<h2>Nyheder</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
as you can see when u move the size of the windows they drop blow each other.
regards Nicklas

If you want to control their position, you should put them inside a table. That way they always will remain in column 1 and column 2 of the tablerow. And you can align them inside the page without much trouble.

Resources