How can I make sticky sidebar, but start sticky after the whole right sidebar has been seen while scrolling. Because at the moment only when you go all the way down you can see the right side all parts
.wrapper {
display: flex;
gap: 24px;
position: relative;
}
.left {
width: 70%;
}
.right {
width: 30%;
}
.sticky {
position: sticky;
top: 10px;
}
.box {
border: 1px solid;
height: 300px;
}
.box1 {
height: 400px;
background: green;
}
.box2 {
height: 200px;
background: pink;
}
<div class="wrapper">
<div class="left">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div class="right">
<div class="sticky">
<div class="box1">
box 1
</div>
<div class="box2">
box 2
</div>
</div>
</div>
</div>
So I need both block1 and block2 when you start scrolling to be seen first, and after that to stay sticky. Can someone help please
Related
I'm trying to re-create cell freezing just like in any popular spreadsheet program. In addition, each cell can have a dropdown with dropdown-body which should be displayed to select an option.
The problem
The dropdown-body is relatively positioned, wrapped in an element with absolute position. When I use this dropdown in the frozen part (which has position: sticky), the body is "hidden" inside the overflow viewport. I tried to adjust this by specifying z-index on the wrapper and the .cell-content-wrapper and .cell-content with no luck. Is there a possibility to bring the .cell-content to the front?
Any help appreciated.
#wrapper {
width: 600px;
min-height: 150px;
overflow: scroll;
}
.row {
display: flex;
width: 100%;
}
.cell {
display: inline-flex;
min-width: 70px;
overflow: hidden;
border: 1px solid gray;
}
.frozen-part {
background: lightblue;
display: flex;
position: sticky;
left: 0;
}
.cell-content-wrapper {
position: absolute;
}
.cell-content {
position: relative;
top: 25px;
width: 100px;
height: 300px;
background: #7cfc00;
}
<div id="wrapper">
<div class="row">
<div class="frozen-part">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">
Dropdown
<div class="cell-content-wrapper">
<div class="cell-content">
This should be in front
</div>
</div>
</div>
<div id="dropdown"></div>
</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">
Dropdown
<div class="cell-content-wrapper">
<div class="cell-content">
This is a desired behavior
</div>
</div>
</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
</div>
I have content navigation div overlapping menu navigation div. Please let me know what am i missing here. Please find fiddle link below:
https://jsfiddle.net/y4c2xs5j/1/
HTML:
<div class="top-nav">
<div class="menu-nav">
<div class="row">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
</div>
<div class="content-nav">
<div class="row">
<div class="col-md-12">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<p>
Card content
</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: red;
height: 100vh;
}
.top-nav {
width: 100vw;
}
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
}
As per my understanding, you want to cover only 60px width with menu-nav, and rest want to cover with content-nav, According to below code:
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
}
If I am getting correct then you just neeed to add one more property with content-nav, overflow:hidden;
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
overflow:hidden;
}
By adding overflow hidden, you will get complete width rest 60px with content-nav, That is issue cause by float:left, when we are use float property, then the issue is generated, for the same we have to use overflow:hidden
Try this code. Is this what you needed ?
<div class="top-nav">
<div class="menu-nav">
<div class="row">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
</div>
<div class="content-nav">
<div class="row">
<div class="col-md-12">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<p>
Card content
</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: red;
height: 100vh;
}
.top-nav {
width: 100vw;
display: flex;
flex-direction: column;
}
.menu-nav {
width: 100vw;
background: green;
height: 20vh;
float: left;
}
.content-nav {
width: calc(100vw - 100px);
background: yellow;
height: 100vh;
}
You just need to add one property in ".content-nav" and also add clearifx class in the parent of both tag (.menu-nav, .content-nav)
<div class="top-nav clearfix">
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
float: left;
}
Whenever you use rows and columns, please check if you have at least one container that contains them. The gap you see on the right is caused by the negative margins from the rows.
The easy fix is to have .container-fluid on or inside menu and content nav.
On menu and content nav
<div class="top-nav">
<div class="menu-nav container-fluid">
...
</div>
<div class="content-nav container-fluid">
...
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/8/
Inside menu and content nav
<div class="top-nav">
<div class="menu-nav">
<div class="container-fluid">
...
</div>
</div>
<div class="content-nav">
<div class="container-fluid">
...
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/7/
You don't need to calculate the width for content-nav as fluid container will set its width to 100%:
.content-nav {
/*width: calc(100vw - 60px);*/
background: yellow;
height: 100vh;
}
So I have this html and this css. I want the .big elements be displayed in the corners of my .About
This is how it looks like so far using this code
The output of the code
I would like the first .big .box from the .left-box .container to be displayed on the top of .left-box .container and the first .big .box from the .right-box .container to be displayed on the top of .right-box .container. Rest of the div's should stay the same as they are.
.box {
width: 100%;
height: 300px;
position: relative;
border: 1px solid black;
}
.container {
display: inline-block;
width: 33%;
}
.big {
height: 400px;
}
.arrow {
border: 1px solid green;
position: absolute;
width: 20px;
height: 20px;
}
img {
position: absolute;
width: 100%;
height: 300px;
}
.top {
top:0
}
.middle {
top:50%;
margin-top:-10px;
}
.bottom {
bottom:0
}
.left {
left:0;
}
.center {
left:50%;
margin-left:-10px;
}
.right {
right:0;
}
<div class="About">
<div class="left-box container">
<div class="big box">
<div class="arrow bottom right"></div>
</div>
<div class="big box">
<div class="arrow top right"></div>
</div>
</div>
<div class="middle-box container">
<div class="box">
<div class="arrow bottom center"></div>
</div>
<div class="box">
<img src="images/marks.jpg" alt="marks" />
</div>
<div class="box">
<div class="arrow top center"></div>
</div>
</div>
<div class="right-box container">
<div class="big box">
<div class="arrow bottom left"></div>
</div>
<div class="big box">
<div class="arrow top left"></div>
</div>
</div>
</div>
Simple yet can't figure it out. Hot can I make 2 sidebar boxes one at the top and one bellow. Here is demo
http://jsfiddle.net/logintomyk/fQPse/
<div id="sidebar">
Text<br/>Sidebar
</div>
<div id="sidebar">
Text<br/>Sidebar
</div>
Those two sidebar divs.
Wrap the sidebars with a parent element which you add the float:right CSS too
#wrapper {
width: 90%;
}
#header {
width: 100%;
height: 50px;
background-color: lightblue;
}
#content {
/* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */
margin-top: 4px;
background-color: yellow;
}
#content >p {
margin-right: 100px;
margin-top: 0px;
}
.sidebarGroup {
width: 100px;
float: right;
}
.sidebar {
width: 100px;
margin-top: 4px;
background-color: pink;
}
#footer {
width: 100%;
height: 40px;
margin-top: 4px;
background-color: red;
}
<div id="Wrapper">
<div id="header">
header
</div>
<div class="sidebarGroup">
<div class="sidebar">
Text
<br/>Sidebar
</div>
<div class="sidebar">
Text
<br/>Sidebar
</div>
</div>
<div id="content">
<p>
Stuff
<br/>text
<br/>Just to fill some space
</p>
</div>
<div id="footer">
footer
</div>
</div>
This is practically what frameworks like Bootstrap were made for, but:
<div id="page">
<div id="header">
header
</div>
<div id="content-wrapper">
<div id="sidebar">
<div class="sidebar-box">
I am sidebar content
</div>
<div class="sidebar-box">
I am also sidebar content
</div>
</div>
<div id="content">
Stuff<br/>text<br/>Just to fill some space
</div>
<div class="clearfix">
</div>
</div>
<div id="footer">
footer
</div>
</div>
and then:
#header {
background: red;
}
#content {
background: blue;
width: calc(100% - 104px);
}
#sidebar {
width: 100px;
float: right;
}
.sidebar-box {
background: green;
}
#footer {
background: yellow;
margin-top: 4px;
}
#content-wrapper {
margin-top: 4px;
}
#content:after {
content:'';
display:table;
clear:both;
}
does the trick!
Fiddle here: http://jsfiddle.net/7pcLks4m/
Probably a fairly basic solution to this, but I can't seem to figure it out... have set up a jsfiddle to demonstrate:
http://jsfiddle.net/AxKq8/1/
HTML
<div class="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.box {
width: 50%;
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
float:right;
background-color: green;
position: relative;
top:0px;
right:0px;
}
I have 3 divs. What I'd like to do is have the top of the green div align with the top of the blue div.
As you can see I tried floating the first two divs left, and the third div right. That didn't work, so tried a relative positioning. Also tried using clear aswell, but it's eluding me!
Any suggestions on how to make this work?
Thanks!
Jon
Positioned the third div absolute with top:0
#box-3 {
height: 300px;
float:right;
background-color: green;
position: absolute;
top:0px;
right:0px;
}
Working CODE:JSFIDDLE
You can put the blue and red box in a container, and then a green box in another container. Float the two containers rather than the boxes.
http://jsfiddle.net/AxKq8/9/
HTML
<div class="wrapper">
<div class="container">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
</div>
<div class="container">
<div id="box-3" class="box">
</div>
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.container {
float: left;
width: 50%
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
background-color: green;
}
Give this a try: JSFiddle
HTML:
<div class="wrapper">
<div class="box-group box">
<div id="box-1" class="box2"></div>
<div id="box-2" class="box2"></div>
</div>
<div class="box-group box">
<div id="box-3" class="box2"></div>
</div>
</div>
CSS:
.wrapper{ width: 100%; }
.box { width: 50%; }
.box2 { width: 100%; }
.box-group { float: left; }
#box-1 { height: 200px; background-color: blue; }
#box-2 { height: 100px; background-color: red; }
#box-3 { height: 300px; background-color: green; }
I created columns with the .box-group class, I grouped the first two items into the first column div so the stacking and floating will appear properly.