I wonder if there is possible to set the first div behind the second one without use jquery or flex box.
Is there any way ?
.container {}
.one {
background-color: #FF0004;
float: right;
}
.two {
background-color: #000DFF;
float: left;
}
<body>
<div class="container">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos vitae nihil facere repudiandae voluptatem corporis tempore quasi? A quo aspernatur odit expedita cum maxime, alias quis. Laudantium quaerat voluptatem quo.</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, eos. Quas nihil tenetur suscipit asperiores obcaecati fuga, id, quis dolor quisquam explicabo modi optio unde! Quas atque eius, numquam aliquam.</div>
</div>
</body>
Thank you !
Give parent div position:relative and position:absolute to child div.
Now you can handle the position of div using top:10px and left:10px.
.container {
position:relative;
}
.one {
background-color: #FF0004;
float: right;
}
.two {
background-color: #000DFF;
float: left;
position:absolute;
top:10px;
left:10px;
}
<div class="container">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos vitae nihil facere repudiandae voluptatem corporis tempore quasi? A quo aspernatur odit expedita cum maxime, alias quis. Laudantium quaerat voluptatem quo.</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, eos. Quas nihil tenetur suscipit asperiores obcaecati fuga, id, quis dolor quisquam explicabo modi optio unde! Quas atque eius, numquam aliquam.</div>
</div>
you can use z-index
.container {}
.one {
background-color: #FF0004;
position: absolute;
left: 5px;
top: 5px;
z-index: -1;
}
.two {
background-color: #000DFF;
}
<div class="container">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos vitae nihil facere repudiandae voluptatem corporis tempore quasi? A quo aspernatur odit expedita cum maxime, alias quis. Laudantium quaerat voluptatem quo.</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, eos. Quas nihil tenetur suscipit asperiores obcaecati fuga, id, quis dolor quisquam explicabo modi optio unde! Quas atque eius, numquam aliquam.</div>
</div>
Related
I'm doing the front-end on my website. I included a couple divs in my mark-up. which show on the live previewer server on vscode but when I open the very same in page in a browser these divs don't show and I don't know why cause I have not hidden them. I've set CSS but still not nothing. what's confusing is that it shows in the code editor but not on the browser.
.ad-2 {
position: relative;
top: 0px;
left: 0px;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-3 {
position: absolute;
top: 0px;
left: 0px;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-4 {
position: absolute;
top: 201px;
left: 0px;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-5 {
position: absolute;
top: 0px;
right: 0px;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-6 {
position: absolute;
top: 201px;
right: 0px;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
<div class="paragraph">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum. Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus? Lorem
ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div class="ad-1"></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit! Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus
voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis
pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div class="ad-2"></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div class="ad-3"></div>
<div class="ad-4"></div>
<div class="ad-5"></div>
<div class="ad-6"></div>
</div>
as you can see all the ad divs have css set on them but they visible on the browser. what could be causing this.
After playing with this for a while, it seems like Chrome actually interprets the class names (ex, ad-1) as something weird. Change the names of each class.
.number2
{
position: relative;
top: 0;
left: 0;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number3
{
position: absolute;
top: 0;
left: 0;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number4 {
position: absolute;
top: 201px;
left: 0;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number5
{
position: absolute;
top: 0;
right: 0;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number6
{
position: absolute;
top: 201px;
right: 0;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
<div class="paragraph">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div class="number1"></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div class="number2"></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div class="number3"></div>
<div class="number4"></div>
<div class="number5"></div>
<div class="number6"></div>
</div>
The ad- class name triggers adblocking extensions. Do you use an adblocker? If so, it's blocking the elements from rendering. You have two fixes:
Disable your adblocker
Obviously this is not a great solution, because anyone else with an adblocker will be unable to view those divs.
Rename them
As Matthew mentioned, changing the class name to something that doesn't get blocked by adblockers will work. The Chromium rendering engine (and by extension, Chrome) isn't the one disabling the divs, it's your adblocker.
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
I am trying to make a layout where the uneven sized elements will be "1 - 2 / 3 - 4" on desktop, and stacked one under the other on the mobile. I've tried to do that with floats, and I'm partially there. However, the gap between the elements 2 and 4 is too large... Is there a way to reduce this somehow, maybe with the other approach perhaps?
Please check the full-page preview, thanks a lot for any input!
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
section {
}
section:nth-child(odd) {
float: left;
width: 66%;
}
section:nth-child(even) {
float: right;
width: 33%;
}
footer {
clear: both;
}
#media(max-width: 992px) {
section:nth-child(odd) {
float: none;
width: 100%;
}
section:nth-child(even) {
float: none;
width: 100%;
}
}
<div class="wrap">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
<footer>
footer
</footer>
If you can use grid and change the starting order of your html elements, you can make them stack how you want on desktop, and then use a media query to change to flex and have them 100% width and ordered correctly for mobile
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
.wrap {
display: grid;
grid-template-columns: 66% 33%;
column-gap: 1%;
}
#media(max-width: 992px) {
.wrap {
display: flex;
flex-wrap: wrap;
}
.column {
display: contents;
}
section {
width: 100%;
}
.test1 {
order: 1;
}
.test2 {
order: 2;
}
.test3 {
order: 3;
}
.test4 {
order: 4;
}
}
*/
<div class="wrap">
<div class="column">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
<div class="column">
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
</div>
<footer>
footer
</footer>
I guess you don't need grid and can just use flex:
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
.wrap {
display: flex;
justify-content: space-between;
}
.column:first-child {
width: 66%;
}
.column:last-child {
width: 33%;
}
#media(max-width: 992px) {
.wrap {
flex-wrap: wrap;
}
.column {
display: contents;
width: 100%;
}
section {
width: 100%;
}
.test1 {
order: 1;
}
.test2 {
order: 2;
}
.test3 {
order: 3;
}
.test4 {
order: 4;
}
}
*/
<div class="wrap">
<div class="column">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
<div class="column">
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
</div>
<footer>
footer
</footer>
You could work only on a media query min-width: 992px.
On your .wrap element, add display: flex and flex-wrap: wrap. flex-wrap will allow your children to go to the next line.
.wrap {
display: flex;
flex-wrap: wrap;
}
Then, define the width of your children.
section:nth-child(odd) {
width: 66%;
}
section:nth-child(even) {
width: 34%;
}
#media(min-width: 992px) {
.wrap {
display: flex;
flex-wrap: wrap;
}
section:nth-child(odd) {
width: 66%;
}
section:nth-child(even) {
width: 34%;
}
}
/* For demo only */
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
<div class="wrap">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
So what I am trying to have is a different scrollbar for the scrollable div and a different one for the whole window. This is what I have tried to do but I haven't been able to get two different colour scroll bar.
*{
margin: 0;
padding: 0;
font-family: 'segoe ui light';
}
header{
width: 100%;
height: 300px;
background: #efefef;
}
.container{
width: 90%;
margin: auto;
}
h1{
padding: 20px 0;
font-size: 45px;
font-family: 'segoe ui light';
text-align: center;
}
h2{
font-size: 35px;
padding: 10px 0 20px 20px;
}
figure{
top: 0;
width: 400px;
height: 500px;
padding: 0px 0px 0px 125px;
}
img{
width: 100%;
height: 100%;
}
.section{
padding: 50px 0;
height: 500px;
-webkit-column-count: 2;
-webkit-column-gap:20px;
}
.intro{
font-weight: 1000;
}
.content{
max-height: 250px;
overflow-y: scroll;
overflow-x:hidden;
}
/******************SCROLL BAR***********************/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
opacity: 0;
background-color: #d2edda;
//-border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #0b602f;
}
::selection {
color: white;
background: #13DA69;
}
<html>
<head>
<link rel="stylesheet" href="..//css/interview.css">
</head>
<body>
<header></header>
<div class="container">
<h1>INTERVIEW</h1>
<div class="section one">
<h2>Name</h2>
<div class="intro">
<b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam quia, dolores impedit autem consequuntur eaque sed harum adipisci quos voluptas, maxime ducimus nemo id et excepturi temporibus, <br>perspiciatis reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem sed aut dolore magni corrupti. Debitis minus officiis magni, laborum! Unde impedit similique delectus voluptatibus necessitatibus a atque, debitis dolores nulla.</b>
</div>
<br>
<br>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
</div>
<figure>
<img src="" alt="insert img here">
</figure>
</div>
</div>
</body>
</html>
So a different scrollbar for the div and a different scrollbar for the window is required.
Just like with any CSS selector, you simply need to apply the various ::-webkit-scrollbar pseudo-elements to the div element itself by specifying this within the selector:
/* This styles any scrollbar. */
::-webkit-scrollbar {
...
}
/* This styles any scrollbar which is part of a `div` element. */
div::-webkit-scrollbar {
...
}
*{
margin: 0;
padding: 0;
font-family: 'segoe ui light';
}
header{
width: 100%;
height: 300px;
background: #efefef;
}
.container{
width: 90%;
margin: auto;
}
h1{
padding: 20px 0;
font-size: 45px;
font-family: 'segoe ui light';
text-align: center;
}
h2{
font-size: 35px;
padding: 10px 0 20px 20px;
}
figure{
top: 0;
width: 400px;
height: 500px;
padding: 0px 0px 0px 125px;
}
img{
width: 100%;
height: 100%;
}
.section{
padding: 50px 0;
height: 500px;
-webkit-column-count: 2;
-webkit-column-gap:20px;
}
.intro{
font-weight: 1000;
}
.content{
max-height: 250px;
overflow-y: scroll;
overflow-x:hidden;
}
/******************SCROLL BAR***********************/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
opacity: 0;
background-color: #d2edda;
//-border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #0b602f;
}
div::-webkit-scrollbar-track {
background-color: red;
}
div::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
background: purple;
}
::selection {
color: white;
background: #13DA69;
}
<html>
<head>
<link rel="stylesheet" href="..//css/interview.css">
</head>
<body>
<header></header>
<div class="container">
<h1>INTERVIEW</h1>
<div class="section one">
<h2>Name</h2>
<div class="intro">
<b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam quia, dolores impedit autem consequuntur eaque sed harum adipisci quos voluptas, maxime ducimus nemo id et excepturi temporibus, <br>perspiciatis reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem sed aut dolore magni corrupti. Debitis minus officiis magni, laborum! Unde impedit similique delectus voluptatibus necessitatibus a atque, debitis dolores nulla.</b>
</div>
<br>
<br>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
</div>
<figure>
<img src="" alt="insert img here">
</figure>
</div>
</div>
</body>
</html>
I'm working on a website and I've this code
.container {
width: 100%;
margin:0 auto;
}
.container div {
width: 25%;
display: inline-block;
vertical-align:top;
background: lightblue;
border: 1px solid black
}
<div class="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nisi, sit eius provident, vitae, quisquam impedit dolore ad aperiam incidunt optio consequuntur aliquam facilis hic ullam! Quisquam tempora, fuga numquam.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quod, ipsa quidem natus quis quam odit molestiae sit, debitis amet expedita fugiat nesciunt at modi eos, porro laborum quas optio.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, necessitatibus alias atque nulla praesentium dolorem, dignissimos autem culpa placeat quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora labore optio placeat aperiam facilis recusandae velit, minus modi quo dolores molestias in ratione officia accusantium, reiciendis porro, ipsam, repellendus atque!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quisquam ratione ducimus temporibus rerum, voluptatum facilis repellat quos nostrum commodi adipisci hic libero, rem optio consequatur tempora sed sequi voluptas!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor nobis veritatis deserunt voluptate illum, voluptatibus consequuntur optio autem sint, accusamus ipsam, quidem nesciunt doloribus similique doloremque magni dolorem. Animi.</p>
</div>
</div>
I want my divs collapse vertically like this image :
I try to add a float: left; but it does not work.
Thanks for your help !
Add flex properties to your .container class.
.container {
width: 100%;
margin:0 auto;
display:flex;
flex-wrap:wrap;
}
It is not that easy to achieve with few lines of html + css when you don't want to use flexbox.
I suspect you should give a try this plugin:
http://masonry.desandro.com/
I've got a question about negative margins. I've been reading this book about web design and in it there is an example of changing source order by using floats and negative margins however when I attempt to do the same it doesn't seem to work properly.
So given this HTML & CSS code, how do I swap the position of div1 and div2 using only floats and positive/negative margins? I know that there are numerous other ways but this thing bothers me and i want to figure it out.
both .div1 and .div2 should remain float: left;
body {
background: #222;
}
h1 {
text-align: center;
border-bottom: 1px solid navy;
}
.wrapper {
width: 960px;
margin: 0 auto;
outline: 2px dashed yellow;
}
.footer {
clear: both;
background: black;
color: white;
text-align: center;
}
.div1, .div2 {
float: left;
background: orange;
}
.div1 {
width: 480px;
}
.div2 {
width: 480px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="div1">
<h1>Heading 1</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
</div>
<div class="div2">
<h1>Heading 2</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
</div>
<!--
<div class="div3">
<h1>Heading 3</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
</div>
-->
<div class="footer">Footer</div>
</div>
</body>
</html>
In this case you can switch the div's even without (negative) margins
Change this
.div1, .div2 {
float: left;
background: orange;
}
To
.div1, .div2 {
background: orange;
}
And add your floats
.div1 {
float: right;
width: 480px;
}
.div2 {
float: left;
width: 480px;
}
Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
http://www.w3schools.com/css/css_float.asp
EDIT
If you want both divs to float left you could use this. I would not recommend it, because it can get reallly messy across brwosers
.div1, .div2 {
float: left;
background: orange;
position:relative;
}
.div1 {
width: 480px;
margin-left:480px
}
.div2 {
width: 480px;
margin-left:480px
z-index:999;
margin-top:-335px;
}
Do this:
.div1, .div2 {
float: left;
background: orange; /* Kill this float to avoid conflict */
}
.div1 {
width: 480px;
/* Float to the position you want by adding float property and value */
}
.div2 {
width: 480px;
/* Float to the position you want by adding float property and value */
}
Now you'll have something like this
.div1, .div2 {
background: orange;
}
.div1 {
width: 480px;
float: right;
}
.div2 {
width: 480px;
foat: left:
}
Note: Do not use negative margin values to position elements except when an overlap is needed. Negative value margins can cause an overlap to the position given.