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.
Related
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
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>
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.
I have a tooltip div, which has modified border on top to look like arrow, which is done by some before and after attributes. But when I use overflow: auto on that div, that "arrow" disappears.
How it should looks without overflow:auto;:
http://jsfiddle.net/nmvh4L6g/1/
How it looks with overflow: auto;:
http://jsfiddle.net/nmvh4L6g/2/
Sorry for my english and thanks for any help!
In top of my head, you can use an internal div, like:
<div id="tooltipNotifikace">
<div>Lorem impsum dolor sit amet</div>
</div>
And in CSS, you use the overflow in the internal div:
#tooltipNotifikace > div {
max-height: 500px;
overflow-y: auto;
}
JSFiddle: http://jsfiddle.net/nmvh4L6g/7/
You don't really need to set the overflow-y to auto. The tooltip will adjust its height automatically until it reaches the max-height value of 500px you have set.
Edit:
I guess I'm feeling magnanimous today:
/* Based on http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/ */
.tooltipWrap {
position: fixed;
right: 6px;
top: 20px;
}
#tooltipNotifikace, .arrow:after {
background: #fff;
border: 2px solid #0dbe48;
}
#tooltipNotifikace {
color: #1bc204;
text-align: center;
padding: 0px 0px 0px 0px;
width: 350px;
max-height: 300px;
overflow-y: auto;
background: #fff;
border: 2px solid #0dbe48;
z-index:1;
}
.arrow {
width: 70px;
height: 18px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
top: -16px;
}
.arrow:after {
content: " ";
position: absolute;
left: 20px;
top: 10px;
width: 25px;
height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
z-index:2;
}
<div class="tooltipWrap"><div id="tooltipNotifikace">Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet.</div><div class="arrow"></div></div>
JSFiddle.
I would like to build a responsive 3-columns layout. For large screens I have 3 columns, reduced to 2 for medium and to 1 for small screens. Blocks contain text, so they have different height. My goal is to create a line of blocks aligned to the top (this illustration refers to 3-columns layout but principle is valid for 2-columns too).
But my best result is the following
Pretty different, yes. I think the problem is that I am not able to create virtual "lines" of blocks, where I can align 1-2-3 and 4-5-6 to the top. Here is my code (I haven't posted it on jsfiddle because effect can be noticed better on wide screens).
HTML
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
CSS
.span3 {
float:left;
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:left;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:31%;
margin-left:3.5%;
}
.span3:nth-child(3n+1) {
margin-left:0%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:48%;
margin-left:4%;
}
.span3:nth-child(odd) {
margin-left:0%;
}
}
#media only screen and (max-width:500px)
{
.span3 {
width:100%;
margin-left:0%;
}
}
Can anybody help? Thanks in advance.
Note I know there are tons of frameworks with this feature (like in this question), but if possible I would prefer to keep my own code.
In Bootstrap 2.x, you can do this..
<div class="row">
<div class="span4">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span4">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span4">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="clearfix"></div>
<div class="span4">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span4">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span4">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Demo: http://www.bootply.com/120857
i put a row class in each row. here is the code
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
and float it left and put margin buttom
whole code is here
http://jsfiddle.net/ndEUS/
Now its working if u use 3 times clear:both but I rly dont know why is needed use there 3x.
http://jsfiddle.net/LmPwe/
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div style="clear:both;"></div><div style="clear:both;"></div><div style="clear:both;"></div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Find it out! Super simple and effective.
CSS
.span3 {
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align:top;
margin-right:-4px;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:33.3%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:50%;
}
}
#media only screen and (max-width:500px)
{
.span3{
width:100%;
}
}
Hope it can help somebody.