The div currently on the right is at the correct position, where i want it to be. But if the page gets too long, i want it to scroll along, so i add position: fixed;
But now its somewhere completely different. How can i fix this?
JSfiddle with the code
Try with:
#right {
float: right;
width: 200px;
background: red;
position: fixed;
margin-left:620px;
}
I add 620px because your left column has 600px and before your position: fixed there were a 20px of margin between each columns.
That's because fixed behaves like absolute (except that it will stay put when you scroll the page). You have to provide top and left values.
Try this:
#right {
width: 200px;
background: red;
position: fixed;
left:710px;
}
Related
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
I want to align two boxes like this:
The left panel width moves in the range 260-320px ( depending on the browser-width ) and has position: fixed, while the other panel should take the remaining part of the browser.
I created a fiddle here: http://jsfiddle.net/NTwUY/4/
The problem is that they go over each other, instead of one next to other.
I don't want to use javascript for this and I can't just set margin-left: 260px on the second because it's responsive.
Here it is: http://jsfiddle.net/NTwUY/2/
You have to give fixed rule to the #holder layer:
#holder {
width: 100%;
position: fixed;
}
#panel {
float:left;
background-color: green;
min-width: 200px;
width: 20%;
max-width: 320px;
}
#content {
}
I'm trying to imitate this image:
(original image page)
There's a shadow effect from the left column onto the right column, usually I use the faux columns method and put the background on the container but for this case the left column should be over the right column.
EDIT: I have now this base on your answer but the background on the sidebar doesn't stop at the container's height (it overflows to the bottom of the page).
#map-app {
height: 100%;
min-height: 650px;
width: 1200px;
margin: 30px auto;
background-color: #FFFFFF;
.sidebar {
background-image: url('/data/images/map/v2/sidebar_separator.png');
background-position: top right;
background-repeat: repeat-y;
position: absolute;
height: 100%;
width: 350px;
z-index: 9999;
}
.content-container {
position: absolute;
height: 100%;
width: 100%;
z-index: 9998;
}
}
It looks like this:
Any suggestions as of how I could achieve this?
If you want to make sure that the left column will be positioned directly above the right, obviously use the z-index element and provide the left column with a shadow effect for the right border. This would allow you to fill the page entirely with the right column, and half with the left column, using z-index to set the left columns stack order above the right. I won't display any code for you if you won't show at least a snippet of what you have. Kind of pointless.
Update: You would obviously have to use position: absolute; for both columns in order to achieve this effect you are aiming for, if you set it to relative the browser would not allow them to overlap.
Update: If you're looking to stretch both columns to the height of the browser, you'd obviously use the same container for both and set it's height: 100%; The problem with having a container, left column, and right column is, you can set the container to 100% height, but that just gives the content you put inside of it 100% height, doesn't mean the content will also be exactly 100% in size. What I would recommend doing is to change the container code to height: 100%; width: 100%; and only set one <div class="container"></div>
Code Update:
.container {
height: 100%; width: 100%;
}
.leftcolumn { // Guessing this would be your .sidebar
overflow: hidden; // Option 1: Set the overflow to hidden.
position: absolute;
height: 100%; width: 50%; // Option 2: Set the height slightly lower. like 99%
z-index: 9999; // Higher than right.
}
.rightcolumn {
position: absolute;
height: 100%; width: 100%;
z-index: 9998; // Lower than left.
}
In the picture below, I am wanting to place the driftwood/bomb image over the image directly above it; hence, I want to remove/collapse the "space" between these two divs. The gap, however, is not caused by the markup itself, because as you can see the "bomb" is making the picture bigger on the height.
I would like to position the navigation bar on the "header" (so the brown top of the navigation is just below the header bottom), so the gap disappears. These images are meant to overlap.
I assume this can be done using CSS. But how? Whatever solution needs to work cross-browser.
HTML:
<header></header>
<nav></nav>
CSS:
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
}
Maybe a negative margin?
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
margin: -90px auto 0;
}
http://jsfiddle.net/NmUfT/
Relative positioning could fix this for you:
nav {
position: relative;
top: -20px;
}
place the div inside the header div.
nav {
position: relative;
bottom: -30px;
}
A top-margin with a negative value is indeed what you seek. If the nav would disappear beneath the header, you should change the nav's z-index. Try different numbers: 100, 1000, 10000 etc.