I have these 2 columns:
If I scroll down on my html page, I want only the second column to scroll down, the left one should always be frozen.
Could someone help? This has to be done only in html.
Thanks!
You would use position: fixed. Then put all your content in the second column. See example below:
body {
width: 100%;
padding: 0;
margin: 0;
}
.sidebar {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
width: 250px;
background-color: #efefef;
}
.content {
margin-left: 250px;
padding: 1rem;
}
<body class="grid">
<div class="sidebar">
</div>
<div class="content">
<p>
This is the content for this section! :D
</p>
</div>
</body>
Hey there’s a lot of ways to do this simple task but I’ll try and be as straightforward as possible.
In your JavaScript html, (I use Sumblime)
<div id=“Column1”>
<p><strong>Column 1</strong></p></div>
Now I will open CSS in Visual Studio Code,
div#Column1 {
Background-color: rgb (0,0,0)
font-family: ‘Roboto Mono’, monospace;
float: left;
border-radius 22;
position: absolute;
right: 22%;
}
The ‘position’ method is used in CSS for positioning elements. In this case absolute can be used to make the position of the div for your column more static.
Be very very careful with it though!
I would advise to use position: sticky; See my example:
.container {
width: 800px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 15px;
}
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
height: 300px;
width: 100%;
background: red;
}
.sticky p {
font-size: 35px;
padding: 15px;
}
.content-block {
width: 100%;
height: 1000px;
background: green;
}
<div class="container">
<div class="sticky">
<p>sticky on screen</p>
</div>
<div class="content-block">
</div>
</div>
Related
I'm trying to create an area that contains all my absolutely positioned items. It works great until its sibling has an overflow attached to it. In the example below, when you start scrolling, the child div scrolls as if it's fixed. If you comment out the overflow: auto in the #app CSS, you'll get the desired behavior, but obviously the layout is incorrect. How can I fix this issue without moving the absolute div into the #app div?
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
If you want to use absolute positioning on .absolute you'll have to nest that code within #app and set it to position: relative;. The absolute positioning is referring to its nearest positioned ancestor, in this case, the body element, hence, why it is staying fixed. So you'll have to set #app to relative and it should work just fine.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
position: relative;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
This should also work for you, see changes I made to HTML and CSS below.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: relative;
top: 0;
left: 0;
}
.child {
top: 0px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
color: black;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">Content 1
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
</div>
I have a grid parent, with 2 columns. The left child has the same height as the parent (here is 100vh) and the right child is 1000px, which is greater than the parent.
HTML:
<body>
<div class="leftcol"></div>
<div class="rightcol"></div>
</body>
CSS:
body{
background-color: white;
display: grid;
grid-template-columns: 2fr 3fr;
margin: 0;
overflow: hidden;
}
.leftcol {
background-color: grey;
height: 100vh;
width: 100%;
}
.rightcol {
background-color: black;
height: 1000px;
width: 100%;
overflow: auto;
}
I only want the right child to be scrollable, since it's height is greater than the parent, the left child will stay still. I've read some other posts and they suggest using overflow: auto on the child but mine is not working.
Can anybody tell me what I did wrong here? Thank you.
try it
<body>
<div class="leftcol">
<p class="top">top</p>
<p class="bottom">bottom</p>
</div>
<div class="rightcol">
<p class="top">top</p>
<p class="bottom">bottom</p>
</div>
</body>
<style type="text/css">
body{
background-color: white;
display: grid;
grid-template-columns: 2fr 3fr;
margin: 0;
}
.leftcol{
background-color: grey;
height: 100vh;
width: 50%;
position: fixed;
left: 0;
top: 0;
}
.rightcol{
background-color: black;
height: 1000px;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
.leftcol p,
.rightcol p {
text-align: center;
color: #fff;
}
.rightcol p.top {
top: 0;
}
.rightcol p.bottom {
bottom: 0;
padding-top: 900px;
}
.leftcol p.bottom {
padding-top: 80vh;
}
</style>
There is no scrollbar because you don't need to scroll. If you want to show a scrollbar though, you can replace overflow: auto; with overflow: visible;. This makes it show the scrollbar no matter what.
You can learn more about overflows here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content
I have created two div one is with class name .main and the second one is .container.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
position: absolute;
left: 5%;
right: 5%;
top: 25%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
When I am resizing the browser windows vertically the div with the class .container is changing its position. I want it to below the main div.
If you want your div positioned below the .main div (i.e. relative to the .main div), then you should refrain from using absolute positioning and use relative positioning instead. You can also not define a position property - by default it will be set to static, which also works:
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
left: 5%;
right: 5%;
top: 100%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
By default, the .main will be below .container. And position: absolute will remove the element completely out of the document flow.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
margin: 0 5%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
Try this.
I'd like to ask, how to add two images on both sides of a div.
See, I got a main container on my site, and I'd like to add a little decoration on both sides, like a shadow which would foreground the actual content and place less emphasis on the background, y'know?
So, I got something like this:
page.html
...
<body>
<div id="container">
<div id="shadow-left"></div>
<div id="shadow-right"></div>
...
</div>
...
</body>
...
main.css
...
#container {
position: relative;
background: #FFF;
width: 840px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
}
#shadow-left {
// Gotta do that on the left site too
}
#shadow-right {
position: absolute;
top: 80px; // So there's a little space just for the upper nav
left: 840px;
width: 500px;
height: 100vh;
background: url('/res/img/shadow-right.png') 0 0 no-repeat;
}
...
I imagined it to look like this, but there's just NOTHING. How could I accomplish to do that?
Here is a fiddle where the main content is under-shadowed by whatever color you'd like, you can expand the shadow effect by playing around with the css and I'm sure there are plenty of css-shadow generators online. Hope this is what you're looking for.
HTML
<div id="main"></div>
CSS
#main {
width:60%;
margin-left:auto;
margin-right:auto;
background:green;
height:1000px;
box-shadow: 30px 0 19px -4px lightgreen, -30px 0 19px -4px lightgreen;
}
P.S. Excuse the green..
It seems like for this you can use floats, I hope I am understanding your question correctly.
fiddle: https://jsfiddle.net/L4cjz8p9/
HTML
<body>
<div id="container">
<div id="shadow-left"><img src="http://placehold.it/100x300"></div>
<div id="shadow-right"><img src="http://placehold.it/100x300"></div>
Main content
</div>
</body>
CSS
#shadow-left
{
float:left;
}
#shadow-right
{
float:right;
}
#container {
position: relative;
background: #FFF;
width: 840px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
}
Here is one way to position things outside e.g. a centered container. You could then fill the "shadows" with a background that repeats only over y or no repeat at all if you only would like to have something on the top of the page but not repeat when you scroll down.
The example here just has a 50px wide box at both sides next to the container.
Fiddle: http://jsfiddle.net/60yjen0a/
HTML:
<div class="container">
<div class="shadow left"></div>
<div class="shadow right"></div>
<div class="content"></div>
</div>
CSS:
.container {
position: relative;
width: 600px;
height: 1000px;
margin: 0 auto;
}
.content {
position: absolute;
width: 100%;
height: 100%;
background: #eee;
}
.shadow {
position: absolute;
height: 100%;
top: 0;
background: #ddd;
width: 50px;
}
.left {
left: -50px;
}
.right {
right: -50px;
}
With absolute position you can use left and right
#shadow-left {
position: absolute;
top: 80px;
left: 0px;
width: 500px;
height: 100vh;
background: YOUR_BACKGROUND_URL_FOR_LEFT_SHADOW;
}
#shadow-right {
position: absolute;
top: 80px;
right: 0px;
width: 500px;
height: 100vh;
background: YOUR_BACKGROUND_URL_FOR_RIGHT_SHADOW;
}
Check this on JSfiddle
I'm trying to build a website with 4 main divs (more to come later), 3 of which are fixed, so they dont move when i scroll, and one of them is not fixed. i've been going at it for around 6 hours and 30 minutes straight, googled for possible answers, checked youtube and spent atleast 2 hours looking at stackoverflow posts, none of which really pointed me in the right direction.
design im looking to get:
design
source (html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
<title>Title</title>
</head>
<body>
<div class="menu">
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>
</body>
</html>
source (css):
/**/
html,body{
height: 100%;
}
body {
background-image: url("background.jpg");
}
div {
margin: 0px;
}
.menu {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top:200px;
right: 0;
text-align: center;
position:fixed;
}
.contact {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position:fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position:fixed;
top:0px;
left:0px;
}
.main {
background-color: green;
width: 100%;
margin-top:200px;
height: 200vh;
left: ;
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
i tried changing the width of the .main div, but regardless of what i try the div either goes under the .contact or .menu div
the .paragraph divs go into to the .main div, to hold some text and images once the .main div is properly positioned. the sizes of the divs in my source arent completely like they are in my design yet cus i kept trying thing to maybe solve my problem.
the .js file is currently still empty so i didnt post any source of it.
Any help is welcome: links; sources; comments; if you know something that might point me into the right direction, please post it!
edit: i tried using a wrapper, but that didnt work out too wel for me, i probably did something wrong, i posted the source that looks the most like my design when i open in in browser.
jsfiddle: http://jsfiddle.net/zt1Lyaop/
I ignored your existing code and made a new, HTML5 and responsive way of creating such a layout. I hope this helps you in understanding this concept better
http://jsfiddle.net/7k9vhk4r/2/
The key is using fixed and relative positioning, together with creating offsets based on percentages.
I just changed this:
added margin:0 to body
Change .main rules to :
/*width: 100%;*/
margin: 200px 200px 0;
height: 2000px; /* to make it big */
/*left: ;*/
See the demo FULL PAGE
body {
background-image: url("background.jpg");
margin:0;
}
div {
margin: 0px;
}
.menu {
background-color: lightgray;
color: black;
width: 200px;
height: 100%;
top: 200px;
right: 0;
text-align: center;
position: fixed;
}
.contact {
background-color: lightgray;
color: black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position: fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position: fixed;
top: 0px;
left: 0px;
}
.main {
background-color: green;
/*width: 100%;*/
margin: 200px 200px 0;
height: 2000px;
/*left: ;*/
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
<div class="menu">
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>