Is it possible, to fix a div bar at the top of the page even when scrolling, and
still be able to fully see the next div?
The bar div is given a height of 15vh and the other divs are set to 85, so when You see the first view of the page divs #bar and #one are displayed.
I would like that after scrolling down that divs #bar and #two are seen. I tried everything: giving margin, padding, position relative, absolute, adding to #one top: 15vh;. Tried also putting div on #one and #two divs.. made all combinations..
This is the code I have so far that is the closest to what I mean and can't find how to go futher
* {
margin: 0;
padding: 0;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#bar {
background-color: gray;
height: 15vh;
position: fixed;
width: 1000px;
}
#one {
background-color: blue;
height: 85vh;
}
#two {
background-color: red;
height: 85vh;
}
<div id="container">
<div id="bar"></div>
<div id="one"></div>
<div id="two"></div>
</div>
Add padding-top:15vh; to #one to create/add the part which is hidden behind the fixed navbar
* {
margin: 0;
padding: 0;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#bar {
background-color: gray;
height: 15vh;
position: fixed;
width: 1000px;
}
#one {
background-color: blue;
padding-top:15vh;
height: 85vh;
}
#two {
background-color: red;
height: 85vh;
}
<div id="container">
<div id="bar"></div>
<div id="one"></div>
<div id="two"></div>
</div>
Related
Here's a simplified version of my homepage:
<div class="main">
<div class="content"> all the content of my website </div>
<div class="nav"> fixed on the screen and always visible </div>
</div>
And here's the corresponding css:
.main {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: grey;
}
.nav {
width: 100px;
height: 100px;
background-color: blue;
position:fixed;
right: 0; /* that's the issue */
}
I'd like the fixed element to stay within it's parent (touching the right edge of its parent). But right now it's touching the right border of the screen.
Any idea how to fix this? Thanks!
You can add an extra item to simulate the properties of the main container, try this:
.main {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: grey;
}
.nav {
position:fixed;
max-width:500px;
width:100%;
}
.nav > div{
width: 100px;
height: 100px;
background-color: blue;
float:right;
}
<div class="main">
<div class="content">all the content of my website</div>
<div class="nav"><div>fixed on the screen and always visible</div></div>
</div>
position: fixed is described as, "The element is positioned relative to the browser window". You can use Javascript to accomplish this effect, here is how you do it with jQuery, for example:
$(window).scroll(function() {
var y = $(window).scrollTop();
$(".nav").css('top', y);
});
.main {
max-width: 500px;
height: 4000px;
margin: auto;
background-color: grey;
position: relative;
}
.nav {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0; /* that's the issue */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="content"> parent </div>
<div class="nav"> fixed to parent width </div>
</div>
I'm trying to create a layout for a page like this with a full height left close bar. I keep running into the left close bar either pushing everything down or is limited to only the top left corner:
I think you want something like that.
body {margin:0;}
.side {
position: fixed;
background: blue;
top: 0;
left: 0;
bottom: 0;
width: 100px;
}
.content {
padding-left: 100px;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
.top {
height: 100px;
width: 100%;
background: orange;
float: left;
}
.left, .right {
width: 50%;
height: 200px;
float: left;
}
.left {
background: green;
}
.right {
background: magenta;
}
<div class="side"></div>
<div class="content">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
</div>
If you want to make the sidebar full height you can use
.sidebar{
height:100vh;
}
and then you can give position:fixed;
How to make the green div wrap around the blue and yellow divs (his children)
in this particular problem:
https://jsfiddle.net/y74ueuLa/
HTML
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
CSS
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
}
#one {
width: 100%;
height: 150px;
background-color: blue;
position: absolute;
z-index:-1;
}
#two {
position: relative;
top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
}
The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.
With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.
I think what you're trying to do (and please correct me if I'm wrong), is this:
https://jsfiddle.net/dk6L1zLL/
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
padding-top:10px;
padding-bottom:10px;
}
#one {
//width: 100%;
height: 150px;
background-color: blue;
//position: absolute;
z-index:-1;
margin:0 10px 0;
}
#two {
//position: relative;
//top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
/*margin-bottom: 500px;*/
}
#footer {
height: 100px;
background-color: red;
width: 100%;
position: relative;
z-index: -3;
}
<body>
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
</body>
I got rid of a lot of the positioning rules and added some margin and padding.
Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}
The positioning I want to acheive:
Now I have the following:
The properties are following:
.header, .footer {
background: #666;
height: 100px;
}
.content {
background: #ccc;
margin: -25px auto;
min-height: 500px;
width: 960px;
}
So the problem that the content lays below the footer and I don't know how to fix it. z-index doesn't work.
My HTML:
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
Try this
.header, .footer {
background: #666;
height: 100px;
position: relative;
z-index: 1;
}
.content {
background: #ccc;
margin: -25px auto;
min-height: 500px;
width: 960px;
position: relative;
z-index: 100;
}
This example is similar.
3 <div> => middle <div> overlaps upper and lower <div>