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.
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
I try to create a simple layout using display:inline-block
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
display: inline-block;
width: 200px;
height: 390px;
color: white;
padding: 25px;
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
<div class="box1 box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
</div>
<div class="box2 box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
</div>
<div class="box3 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
<div class="box4 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
But it gives unexpected results have a look at the Screenshot. Please guide me on why is that. Is there something wrong with my code or am I missing some hidden concept behind display:inline-block?
You just need to add vertical-align: top; on your .box element.
Here's the example, with the code you had provided:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
display: inline-block;
width: 200px;
height: 390px;
color: white;
padding: 25px;
vertical-align: top; // here's the magic
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
<div class="box1 box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
</div>
<div class="box2 box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
</div>
<div class="box3 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
<div class="box4 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
For a better approach, I suggest you to wrap all the .box elements on a parent element .boxes-container and use display: flex and flex-wrap: wrap on this new parent element.
Here's the solution for the second case:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.boxes_container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 200px;
height: 390px;
color: white;
padding: 25px;
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
<div class="boxes_container">
<div class="box1 box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
</div>
<div class="box2 box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
</div>
<div class="box3 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
<div class="box4 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
</div>
You can use inline-flex instead of inline-block. It works.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
display: inline-flex;
width: 200px;
height: 390px;
color: white;
padding: 25px;
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
Along with display:inline-block you may like to use vertical-align property. In your case:
.box {
display: inline-block;
}
Try to add float:left; to .box
I'm trying to show the sidebar below the header initially, which works fine when the user lands on the website, but when a user scrolls the page, the sidebar not taking the full height, basically I want to achieve sidebar to be fixed at the left once user scrolls just like shown here.
Here is my code snippet
html,
body {
height: 100%;
}
.header {
border: 1px solid black;
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.body {
height: 100%;
background-color: tomato;
display: flex;
padding-bottom: 2000px;
}
.sidebar {
width: 30%;
position: -webkit-sticky;
position: sticky;
height: 100%;
background: black;
color: white;
/* top: 0px; */
}
.content {
padding: 80px;
}
<div class="header">HEADER</div>
<div class="body">
<div class="sidebar">SIDEBAR</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio saepe tempora, voluptas quidem provident atque iste officiis repudiandae expedita, impedit error maxime laboriosam sit qui porro, quo eligendi inventore fugit.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quam non, omnis saepe error nesciunt magnam velit architecto! Pariatur possimus culpa dolor soluta laudantium at neque, consequuntur, mollitia sunt, necessitatibus vitae!Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nesciunt laboriosam, facere laborum totam in qui ex illum necessitatibus, minus numquam enim! Distinctio facilis est reprehenderit sunt quasi consequuntur ullam autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut doloremque
cupiditate facilis aliquid, voluptatibus at illo similique velit sequi dignissimos consectetur placeat, vero excepturi neque facere tempore id ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos veritatis libero praesentium
reprehenderit sequi. A, repellendus, hic. Laborum, et ea voluptas facere! Enim id soluta optio, quam totam officiis!</div>
</div>
I removed height:100% on body and html and also .height, because there is no goal of that as they are adapting their height based on content.
Then I fixed the sidebar height to 100vh.
Now it is fixed. It only leaves at the end because you added a padding-bottom: 2000px; in your .body container.
html,
body {
/*height: 100%;*/
}
.header {
border: 1px solid black;
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.body {
/*height: 100%;*/
background-color: tomato;
display: flex;
padding-bottom: 2000px;
}
.sidebar {
width: 30%;
position: -webkit-sticky;
position: sticky;
height: 100vh;
background: black;
color: white;
top: 0;
}
.content {
padding: 80px;
}
<div class="header">HEADER</div>
<div class="body">
<div class="sidebar">SIDEBAR</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio saepe tempora, voluptas quidem provident atque iste officiis repudiandae expedita, impedit error maxime laboriosam sit qui porro, quo eligendi inventore fugit.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quam non, omnis saepe error nesciunt magnam velit architecto! Pariatur possimus culpa dolor soluta laudantium at neque, consequuntur, mollitia sunt, necessitatibus vitae!Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nesciunt laboriosam, facere laborum totam in qui ex illum necessitatibus, minus numquam enim! Distinctio facilis est reprehenderit sunt quasi consequuntur ullam autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut doloremque
cupiditate facilis aliquid, voluptatibus at illo similique velit sequi dignissimos consectetur placeat, vero excepturi neque facere tempore id ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos veritatis libero praesentium
reprehenderit sequi. A, repellendus, hic. Laborum, et ea voluptas facere! Enim id soluta optio, quam totam officiis!</div>
</div>
With standard behavior of overflow: scroll the padding-bottom is in the bottom of the scrolled block. But how can I make padding-bottom fixed, so odd text will not appear right after bottom border
https://jsfiddle.net/nvg23rp8/6/
body{
background-color: green;
}
.wrapper{
height: 100px;
width: 300px;
background: transparent;
border: 1px solid #000;
padding-top: 20px;
padding-bottom: 20px;
overflow-y: scroll;
position: fixed;
left: 10%;
top: 10%;
}
.middle{
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
.inner{
background: blue;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
</div>
CSS is all about illusions!
Make an outer container and give it some padding to give the required illusion. I couldn't get your Fiddle, so I made a new one. Here you go: https://jsfiddle.net/z9ztcstb/
.container {
position: relative;
}
.text-container {
background: red;
padding: 10px;
}
.text {
height: 100px;
/* background: green; */
overflow: scroll;
}
<div class="container">
<div class="text-container">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In
quae earum recusandae beatae, optio. Incidunt velit corporis nesciunt, soluta dolor laborum eius recusandae perspiciatis. Est alias minima hic iure, incidunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam alias suscipit, quia, vitae consectetur laudantium nisi itaque odio aliquam dolorem voluptas atque, eos perspiciatis. Excepturi cumque doloribus ad, itaque tempore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quaerat saepe possimus fuga consequuntur, dolorum facere harum, ullam id similique tempora magni non dolores. Praesentium esse omnis quia eaque quos!
</div>
</div>
</div>
I would suggest that you put the scroll on the inner box, this would be the most effective way of preventing unwanted overflow of text below the blue background. You could do this without the 'inner' css. Try this out. fiddle here
Hope this helps
$('.wrapper').on('scroll', function() {
$('.inner').scrollTop($(this).scrollTop());
});
body {
background-color: green;
}
.wrapper {
height: 100px;
width: 300px;
background: transparent;
border: 1px solid #000;
padding-bottom: 30px;
position: fixed;
left: 10%;
top: 10%;
}
.middle {
margin: 20px;
padding: 2px 5px;
height: 90%;
overflow-y: scroll;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
this will work:
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
</div>
<div class="border">
</div>
</div>
div.wrapper {
width:340px;
height:120px;
background-color:#ccc;
overflow:auto;
position:relative;
}
div.border {
border:solid 10px red;
height:100px;
position:fixed;
width:300px;
height:100px;
top:0;
left:0;
}
div.content{
z-index:1;
margin:10px;
}
The main point is to put the border outside of the .wrapper container.
The only issue I can see here is you cannot use mouse wheel to scroll .content inside .wrapper, since it has been overlapped by .border
Here is a JSFiddle link you can see: https://jsfiddle.net/zsydyc/pw9jz5s2/3/
I think this might be helpful.
body{
background-color: green;
}
.wrapper{
height: 140px;
width: 300px;
background: transparent;
border: 1px solid #000;
position: fixed;
left: 10%;
top: 10%;
}
.middle{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
height: 100px;
}
.inner{
background: blue;
overflow-y: scroll;
height: 100%;
}
::-webkit-scrollbar {
width: .5rem;
background: inherit;
}
::-webkit-scrollbar-thumb {
background: #f00;
border-radius:.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
</div>
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>
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>